CSS3 Calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁面不跳動(dòng)問題
我要評(píng)論什么是calc()?
calc()從字面我們可以把他理解為一個(gè)函數(shù)function。其實(shí)calc是英文單詞calculate(計(jì)算)的縮寫，是css3的一個(gè)新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設(shè)置動(dòng)態(tài)值。為何說是動(dòng)態(tài)值呢?因?yàn)槲覀兪褂玫谋磉_(dá)式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計(jì)算得到元素的寬度。
語法
calc() = calc(四則運(yùn)算)
例如：
.elm {
width: calc(expression);
}
其中"expression"是一個(gè)表達(dá)式，用來計(jì)算長度的表達(dá)式
說明
用于動(dòng)態(tài)計(jì)算長度值。
- 需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格，例如：width: calc(100% - 10px)；
- 任何長度值都可以使用calc()函數(shù)進(jìn)行計(jì)算；
- calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算；
- calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則；
兼容性
簡(jiǎn)單的例子：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>calc()函數(shù)_CSS參考手冊(cè)_web前端開發(fā)參考手冊(cè)系列</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>
下面就來講解下最常用的這個(gè)：實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁面不跳動(dòng)的應(yīng)用
當(dāng)頁面內(nèi)容動(dòng)態(tài)加載，開始沒有滾動(dòng)條，內(nèi)容增多后出現(xiàn)滾動(dòng)條，這時(shí)使用固定寬度居中對(duì)齊布局會(huì)向左偏移一個(gè)滾動(dòng)條寬度。解決方法可以給內(nèi)容全部添加overflow-y:scroll;或者是根據(jù)內(nèi)容用css填充好再補(bǔ)充內(nèi)容。本文介紹的是calc來計(jì)算滾動(dòng)條寬度，當(dāng)有滾動(dòng)條時(shí)，內(nèi)容外部也給它模擬一個(gè)滾動(dòng)條寬度，因而就不會(huì)偏移了。·
很簡(jiǎn)單，只要一行代碼就搞定了：
.wrap-outer {
margin-left: calc(100vw - 100%);
}
或者：
.wrap-outer {
padding-left: calc(100vw - 100%);
}
首先，.wrap-outer指的是居中定寬主體的父級(jí)，如果沒有，創(chuàng)建一個(gè)（使用主體也是可以實(shí)現(xiàn)類似效果，不過本著寬度分離原則，不推薦）；
然后，calc是css3中的計(jì)算，IE10+瀏覽器支持，IE9瀏覽器基本支持(不能用在background-position上)；
最后，100vw相對(duì)于瀏覽器的window.innerWidth，是瀏覽器的內(nèi)部寬度，注意，滾動(dòng)條寬度也計(jì)算在內(nèi)！而100%是可用寬度，是不含滾動(dòng)條的寬度。
于是，calc(100vw - 100%)就是瀏覽器滾動(dòng)條的寬度大?。ㄈ绻?，如果沒有滾動(dòng)條則是0）！左右都有一個(gè)滾動(dòng)條寬度（或都是0）被占用，主體內(nèi)容就可以永遠(yuǎn)居中瀏覽器啦，從而沒有任何跳動(dòng)！
總結(jié)
以上所述是小編給大家介紹的CSS3 Calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁面不跳動(dòng)問題，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
HTML+CSS3模擬心的跳動(dòng)實(shí)例代碼
本文通過代碼給大家介紹了HTML+CSS3模擬心的跳動(dòng)的實(shí)現(xiàn)方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-05CSS3實(shí)現(xiàn)跳動(dòng)的動(dòng)畫效果
這篇文章給大家介紹了如何利用CSS3實(shí)現(xiàn)跳動(dòng)的動(dòng)畫效果，實(shí)現(xiàn)后的效果很好，有需要的朋友們可以參考學(xué)習(xí)。2016-09-12
這篇文章主要介紹了CSS 3.0文字懸停跳動(dòng)特效代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-26
