資訊專欄INFORMATION COLUMN
摘要：以來說，就是在觸發頁面滾動條時候，會擠壓掉的空間，那我們就可以從不同角度考慮去解決了。
引言
頁面滾動條造成寬度減小的場景很常見了，由于div塊級元素的流動性，其寬度默認為100%的body寬度，但是當容器的高度超過視口寬度時候，頁面就會出現滾動條，這個滾動條的寬度就會擠壓body的可用寬度，也就是會擠壓我們的容器的寬度，造成頁面晃動的現象，很不友好，下面就來探討下如何解決這個滾動條的問題。
滾動條的寬度是多少？既然要解決滾動條造成的問題那么首先需要了解滾動條，即scrollbar的信息主要就是他的寬度，我們把頁面的overflow置為scroll，那么滾動條就會默認占據了空間，下面代碼就可以很容易得到其寬度了：
CSS: 先把body的間距置為0
* {
margin: 0;
padding: 0;
}
html {
overflow-y: scroll;
}
JS: 用視口的innerWidth減去body就是滾動條的寬度
console.log("chrome下滾動條的寬度", window.innerWidth - document.body.clientWidth)
可以得出chrome瀏覽器下，寬度為17px，我在jsfiddle中寫的話打印出來是16px，我沒有在所有瀏覽器都去驗證，但是各瀏覽器的值可能略有不同，但都是一個固定的值。以chrome來說，就是在觸發頁面滾動條時候，會擠壓掉17px的空間，那我們就可以從不同角度考慮去解決了。
如何解決？ 一、最原始的scroll方法首先來講下最原始的方法，其思想是既然在觸發滾動條時候會擠壓空間，那么直接在沒有滾動條的時候也觸發不就可以了么，也就是我們上面算寬度時候的設置：
html {
overflow-y: scroll;
}
這樣不論什么時候都有滾動寬度占據空間，不存在擠壓的問題了...但是這樣做有點蠢，畢竟在不需要滾動條的時候也有那么個丑丑的條子放在右邊。但是他的優點在于方便而且沒有兼容性的問題，其實很多大網站有時候也就這樣用了。。。
二、新屬性overlay方法chrome下overflow有個新的屬性值overlay，這個屬性簡直就是為了這個問題而生，他和auto有點像，但是區別就是在觸發滾動條時候并不擠壓空間，說得直白點就像是移動端的懸浮滾動條，唯一的區別就是不會像手機上那樣自動出現自動消失了，滾動條會遮蓋住容器17px的空間。眼見為實用下面代碼看一下就知道。
高度還未觸發滾動條時候：
* {
margin: 0;
padding: 0;
}
html {
overflow-y: overlay;
}
.container {
height: 200px;
padding: 17px;
background-color: #00b83f;
text-align: right;
}
我是容器內容
效果圖如下：
然后修改容器高度，觸發滾動條：
.container {
height: 2000px;
padding: 17px;
background-color: #00b83f;
text-align: right;
}
效果圖如下：
可以看到雖然出現了滾動條但是并未擠壓容器的寬度，而是遮住了17px的空間，其實本質上就相當于實現了移動端的滾動條表現。
但是非常遺憾，這個屬性值目前只有chrome支持，要是ff/ie都支持，后面也就不用寫了，但是據說以后都會加上去支持的，可以說是非常好用了，后面的方法也只是用其他方法實現這個效果而已。
因為100vw是window的寬度，其實就是window.innerWidth, 而容器的寬度100%就是除了滾動條的可用寬度，因此在沒有滾動條時候calc(100% - 100vw)就是0，觸發滾動條時候其值為負的滾動條寬度，我們將其賦值給容器的margin-right，即可巧妙補償這個寬度的擠壓，在滾動條存在的情況下容器寬度仍然占據整個視口的寬度。
* {
margin: 0;
padding: 0;
}
html {
overflow-y: auto;
overflow-x: hidden;
}
.container {
height: 2000px;
margin-right: calc(100% - 100vw);
padding: 17px;
background-color: #00b83f;
text-align: right;
}
效果如同方法二，很完美，并且兼容性還不錯，起碼高版本的ie和ff都沒問題了。
四、張鑫旭大佬那里抄來的absolute方法鏈接在此，這個利用了絕對定位，保證了body的寬度一直保持完整空間。
html {
overflow-y: scroll; //這是為了兼容ie8，不支持:root, vw
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
:root body {
position: absolute;
}
body {
width: 100vw;
overflow: hidden;
}
在一個普通的容器滾動條擠壓怎么辦？
上面是針對瀏覽器視口的滾動條方案，但是假如在一個普通div容器中也有如此的需求改怎么辦呢？因此此時并沒有像100vw這樣的值直接獲取容器的寬度，只能使用js的方法來檢測計算然后再用margin-right做補償，原理都是一樣的，但是我強烈不推薦也不喜歡用js來計算布局...因此在這種情況下勉強委屈下用上面的第一種方法了，如果是chrome下用第二種方法。
.wrap {
overflow-y: scroll;
overflow-y: overlay;
}
當然你堅決不能忍的話也可以用js去算吧...本質也是一樣的，這里給個鏈接作為參考。
總結方法主要就是上面的幾種，大家根據需求自由選用即可，最重要的是在使用某些新屬性的時候多加思考，很多問題的本質并沒什么區別，只是用新的工具去做而已。
參考都在文中了
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114228.html
摘要：和可以看作是同父異母的兄弟關系。例子如下結果如下而父元素設置屬性的方式則是利用了的特性下面將會詳細講解結界全稱為，中文為塊級格式化上下文。 上一篇：《CSS世界》筆記三：內聯元素與對齊下一篇：《CSS世界》筆記五：CSS層疊規則及元素隱藏 寫在前面 原本博客名為浮動與定位，但是《CSS世界》第六章節的內容不僅有浮動定位，很大一部分篇幅都在講BFC和overflow。更吸引人的是，作者將...
摘要：張鑫旭的深入理解之學習筆記基本屬性屬性介紹默認當與值相同時，等同于當與值不相同時，其中一個值被賦予時，若另一個值為，那這個會被重置為作用前提元素非對應方位的尺寸限制拉伸對于單元格等需要為狀態才可以與滾動條頁面默認滾動條來自與無 《張鑫旭的CSS深入理解之overflow》學習筆記 overflow基本屬性 overflow屬性介紹 overflow: visible(默認)|hidd...
摘要：采坑合集這篇文章會常年更新，在項目中進行實現的時候，經常會遇到很多奇怪的問題，有些問題曾經遇到過但是又忘記了可能是記憶力衰退吧，所以這里做個合集，溫故而知新。每個章節是大概的類型集合容器樣式容器本章主要是和作為容器的元素相關的內容。 CSS采坑合集 這篇文章會常年更新，在項目中進行CSS實現的時候，經常會遇到很多奇怪的問題，有些問題曾經遇到過但是又忘記了（可能是記憶力衰退吧~），所以這...
摘要：而默認的寬度沒有包含滾動條的寬度。滾動條底下的白色其實并不是滾動條的背景色，而是由于的寬度并未鋪滿可視區域的留白。所以我們只要在上加一個即可解決這個問題，但是這種情況下，會出現橫向的滾動條。 大家都知道chrome可以自定義設置滾動條的樣式，可以修改很多參數。主要的兩行樣式的代碼如下： ::-webkit-scrollbar{} ::-webkit-scrollbar-thumb{}...
閱讀 2364·2021-11-11 16:54
閱讀 2612·2021-09-26 09:47
閱讀 3987·2021-09-08 09:36
閱讀 2735·2021-07-25 21:37
閱讀 931·2019-08-30 15:54
閱讀 2542·2019-08-30 14:22
閱讀 3253·2019-08-30 13:57
閱讀 2580·2019-08-29 17:17
