CSS3 calc實現滾動條出現頁面不跳動

時間 2019-11-06

標籤 css3 css calc 實現滾動條出現頁面跳動欄目 CSS 简体版

原文原文鏈接

什麼是calc()?

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

語法

calc() = calc(四則運算)

例如：html

.elm {
  width: calc(expression);
}

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

說明

用於動態計算長度值。

須要注意的是，運算符先後都須要保留一個空格，例如：width: calc(100% - 10px)；
任何長度值均可以使用calc()函數進行計算；
calc()函數支持 "+", "-", "*", "/" 運算；
calc()函數使用標準的數學運算優先級規則；

兼容性

簡單的例子：
css3

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>calc()函數_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {
    width: calc(100% - 50px);
    background: #eee;
}
</style>
</head>
<body>
<div class="test">個人寬度爲100% - 50px</div>
</body>
</html>

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

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

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

.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）被佔用，主體內容就能夠永遠居中瀏覽器啦，從而沒有任何跳動！佈局