css頁面滾動條出現時防止頁面跳動的方法

2022-09-18 06:06:46 字數 534 閱讀 1816

大家寫頁面時應該都遇到過乙個問題,尤其是寫單頁面應用的時候,

有滾動條頁面沒有滾動條頁面之間相互跳轉時,

你頁面的主體內容會向左或者向右抖一下,讓強迫症看了很不舒服。

現在就來解救一下強迫症:

方法一:不管有沒有滾動條,都保留滾動條區域

body
方法二:css3計算calc和vw單位巧妙實現滾動條出現頁面不跳動(相容ie9+以及其他現代瀏覽器)

你希望不抖動的元素
方法二最好別給body加padding-left: calc(100vw - 100%);因為有滾動條時,頁面最左邊也會出現空白;

所以最好單獨給頁面的主要元素加padding-left: calc(100vw - 100%);

css頁面滾動條出現時防止頁面跳動的方法

大家寫頁面時應該都遇到過乙個問題,尤其是寫單頁面應用的時候,在有滾動條頁面和沒有滾動條頁面之間相互跳轉時,你頁面的主體內容會向左或者向右抖一下,讓強迫症看了很不舒服。現在就來解救一下強迫症 方法一 不管有沒有滾動條,都保留滾動條區域 body方法二 css3計算calc和vw單位巧妙實現滾動條出現頁...

頁面滾動條出現頁面不跳動

閱讀完 後,對產生的問題進行解決。首先,vw,是乙個相對於視口的寬度的單位,乙個視口被均分為100單位的vw,也就是說視口寬度 100vw。其次,root 的解釋 root選擇器用於選擇文件的根元素。根元素指的是位於文件樹中最頂層結構的元素。在html中,根元素永遠是html。但實際運用的時候,ro...

頁面滾動條

頁面載入條 前面也介紹過幾種進入頁面時的載入條,這裡介紹的這個是乙個無需任何製作出來的載入條。效果很精美 更適合於深色頁面內的放入 為了讓大家能聯連貫地看學好下面的步驟,所以此例項載入後的頁面還是原頁面。製作方法 將下面的 複製到裡 將下面的 複製到裡 將下面的 複製到 裡 例項注釋 定義載入條屬性...