<button id="mswcq"></button>

CSS基礎篇--CSS3 calc實現滾動條出現頁面不跳動

894974231 發布于2019-08-30 13:45 / 2652人閱讀

摘要：不過最大的好處就是用在流體布局上，可以通過計算得到元素的寬度。于是，就是瀏覽器滾動條的寬度大小如果有，如果沒有滾動條則是左右都有一個滾動條寬度或都是被占用，主體內容就可以永遠居中瀏覽器啦，從而沒有任何跳動參考的使用

什么是calc()?

calc()從字面我們可以把他理解為一個函數function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。為何說是動態值呢?因為我們使用的表達式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。

語法

calc() = calc(四則運算)

例如：

.elm {
  width: calc(expression);
}

其中"expression"是一個表達式，用來計算長度的表達式

說明

用于動態計算長度值。

需要注意的是，運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；

任何長度值都可以使用calc()函數進行計算；

calc()函數支持 "+", "-", "*", "/" 運算；

calc()函數使用標準的數學運算優先級規則；

兼容性

簡單的例子：





calc()函數_CSS參考手冊_web前端開發參考手冊系列




我的寬度為100% - 50px

下面就來講解下最常用的這個：實現滾動條出現頁面不跳動的應用

當頁面內容動態加載，開始沒有滾動條，內容增多后出現滾動條，這時使用固定寬度居中對齊布局會向左偏移一個滾動條寬度。解決方法可以給內容全部添加overflow-y:scroll;或者是根據內容用css填充好再補充內容。本文介紹的是calc來計算滾動條寬度，當有滾動條時，內容外部也給它模擬一個滾動條寬度，因而就不會偏移了。·

很簡單，只要一行代碼就搞定了：

.wrap-outer {
    margin-left: calc(100vw - 100%);
}

或者：

.wrap-outer {
    padding-left: calc(100vw - 100%);
}

首先，.wrap-outer指的是居中定寬主體的父級，如果沒有，創建一個（使用主體也是可以實現類似效果，不過本著寬度分離原則，不推薦）；
然后，calc是css3中的計算，IE10+瀏覽器支持，IE9瀏覽器基本支持(不能用在background-position上)；
最后，100vw相對于瀏覽器的window.innerWidth，是瀏覽器的內部寬度，注意，滾動條寬度也計算在內！而100%是可用寬度，是不含滾動條的寬度。
于是，calc(100vw - 100%)就是瀏覽器滾動條的寬度大小（如果有，如果沒有滾動條則是0）！左右都有一個滾動條寬度（或都是0）被占用，主體內容就可以永遠居中瀏覽器啦，從而沒有任何跳動！

參考

CSS3的calc()使用
calc()

云服務器 GPU云服務器 css滾動條滾動條css html 滾動條 css 滾動條html實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115521.html

水平居中布局與滾動條跳動的千年難題

摘要：于是，問題來了，信息流頁面，如新浪微博，是從上往下渲染的。，結構類似幾個頁面通過頭部的水平導航刷新切換，結果有的頁面有滾動條，有的沒有。絕大多數的頁面間布局都是水平居中布局，主體定個寬度，然后margin: 0 auto的節奏~例如，婦女之友大淘寶的首頁： .warp{ width:1190px; margin:0 auto; position:relativ...

songjz 2019-07-01 10:20 評論0 收藏0
水平居中布局與滾動條跳動的千年難題

摘要：于是，問題來了，信息流頁面，如新浪微博，是從上往下渲染的。，結構類似幾個頁面通過頭部的水平導航刷新切換，結果有的頁面有滾動條，有的沒有。絕大多數的頁面間布局都是水平居中布局，主體定個寬度，然后margin: 0 auto的節奏~例如，婦女之友大淘寶的首頁： .warp{ width:1190px; margin:0 auto; position:relativ...

techstay 2019-08-22 18:49 評論0 收藏0
水平居中布局與滾動條跳動的千年難題

摘要：于是，問題來了，信息流頁面，如新浪微博，是從上往下渲染的。，結構類似幾個頁面通過頭部的水平導航刷新切換，結果有的頁面有滾動條，有的沒有。絕大多數的頁面間布局都是水平居中布局，主體定個寬度，然后margin: 0 auto的節奏~例如，婦女之友大淘寶的首頁： .warp{ width:1190px; margin:0 auto; position:relativ...

mo0n1andin 2019-08-02 10:58 評論0 收藏0
水平居中布局與滾動條跳動的千年難題

摘要：于是，問題來了，信息流頁面，如新浪微博，是從上往下渲染的。，結構類似幾個頁面通過頭部的水平導航刷新切換，結果有的頁面有滾動條，有的沒有。絕大多數的頁面間布局都是水平居中布局，主體定個寬度，然后margin: 0 auto的節奏~例如，婦女之友大淘寶的首頁： .warp{ width:1190px; margin:0 auto; position:relativ...

mist14 2019-08-30 15:54 評論0 收藏0