Calc捲軸出現頁面不跳動的解決方法-css教學-PHP中文網

Calc捲軸出現頁面不跳動的解決方法

php中世界最好的语言

發布： 2018-03-21 11:55:38

原創

1518 人瀏覽過

這次帶給大家Calc滾動條出現頁面不跳動的解決方法，解決Calc滾動條出現頁面不跳動的注意事項有哪些，下面就是實戰案例，一起來看一下。

什麼是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()函數使用標準的數學運算優先權規則；

相容性

簡單的例子：

<!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>
<p class="test">我的宽度为100% - 50px</p>
</body>
</html>

登入後複製

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

當頁面內容動態加載，開始沒有滾動條，內容增加後出現滾動條，這時使用固定寬度居中對齊佈局會向左偏移一個滾動條寬度。解決方法可以為內容全部加上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）被佔用，主體內容就可以永遠居中瀏覽器啦，從而沒有任何跳動！

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

Calc捲軸出現頁面不跳動的解決方法