今天遇到了乙個關於滾動條的問題，為了處理這個問題整整試了一上午，
* 子元素的寬度缺省會撐滿父元素的寬度
* 沒有滾動條時
子元素寬度 = 父元素寬度
* 有滾動條時
父元素的有效寬度會變小
父元素寬度 = 原父元素寬度 - 滾動條寬度
* 因此子元素重新調整寬度
子元素寬度 = 原父元素寬度 - 滾動條寬度
* 此時子元素明顯會因為寬度變小而重新調整布局, 所以發生了擠壓.
明白了前因後果, 就很好找解決方案了.
只要預留出滾動條的空間, 讓子元素的寬度在有滾動條和沒有滾動條時不發生變化就可以了.
* 方式一: 限定內層元素的最大寬度以預留出滾動條的寬度
實 現: max-width: calc(300px - 17px); /* 父元素寬度 - 滾動條寬度 */
* 方式二: 讓內層元素的最小寬度佔滿父元素, 通過 padding 預留出滾動條的寬度
實 現: min-width: 300px; /* 父元素寬度 */
padding-right: 17px; /* 滾動條寬度 */
box-sizing: border-box; /* 讓元素寬度包含 padding, 否則元素會被滾動條遮擋 */
ps: 方式一和方式二的實現效果有細微的差別, 大家請根據實際需求來選擇.
webkit核心的瀏覽器滾動條樣式優化
.img-ul::-webkit-scrollbar
.img-ul::-webkit-scrollbar-thumb
.img-ul::-webkit-scrollbar-track
瀏覽器滾動條
做 時發現登入成功後瀏覽器滾動條消失無法滾動頁面 通過觀察和除錯，發現是強制隱藏了bootstrap的模態框後，body的overflow變為了hidden，同時也多了乙個17px的右內邊距，無法呼叫出垂直滾動條，解決方案 隱藏模態框的同時設定body的overflow為scroll，同時取消右內邊...
iframe滾動條充當瀏覽器滾動條
在做部落格專案的時候，使用了iframe，方便根據選擇的文章類別切換顯示的內容，但是文章一般都有很多，通過bootstrap的 列表的方式顯示的話，iframe是一定會出現滾動條的，特別是我新增了乙個 滾動條觸底之後動態載入更多的文章 的功能。這樣頁面上就會有兩個滾動條，特別奇怪。在網上學習了一些之...
瀏覽器滾動條相關
先去mdn 檢視這兩個概念 scrollheight 以及 clientheight 1，判斷是否存在滾動條 if element.scrollheight element.clientheight 0 2，判斷乙個容器滾動條,沒有在最上面,怎麼判斷 if element.scrolltop 0 3...