在一般瀏覽器中，當內容超出容器時，如果不是overflow:hidden，通常都會出現滾動條，由于滾動條并不是浮在布局內容之上，所以通常會帶來兩個問題：

1，容器內部內容寬度固定，恰好撐滿，此時出現滾動條會把內容擠到下一行(如圖1.gif)；

.container{

width:300px;

height:200px;

background-color:#efefef;

overflow-y:hidden;

overflow-x:hidden;

padding:10px;

}

.container:hover{

overflow-y:auto;

}

.container div{

display:inline-block;

margin-right:5px;

width:92px;

height:300px;

background-color:#777;

}

1.gif

2，容器內容百分比計算，自適應寬度，鼠標經過出現滾動條，鼠標離開滾動條消失，會出現中間內容晃動(如圖2.gif)

注：相對于上面的變化部分，僅是將內部div寬度設為百分比自適應

.container div{

width:calc(100% - 6px);

}

2.gif

那么我們如何來解決這兩個問題呢？

我門可以在DOM布局中做些修改，在container內部再添加一層class="inner-container"的容器，并讓其寬度=width(container)+width(scroller),如此便不會在出現滾動條的時候將內容擠下去了，代碼如下

.container{

width:300px;

height:200px;

background-color:#efefef;

overflow-y:hidden;

overflow-x:hidden;

white-wrap:nowrap;

padding:10px;

}

.container:hover{

overflow-y:auto;

}

.container div div{

display:inline-block;

margin-right:5px;

width:92px;

height:300px;

background-color:#777;

}

/*添加部分：一般ie中的滾動條寬度是24px*/

.inner-container{

width:calc(100% + 24px);

}

原理即是，讓包裹子元素內部容器inner-container比外部容器container 的寬度大于一個滾動條寬度，這樣即使滾動條出現也不會影響子元素。

一般來說windows下IE的滾動條寬度為24px，所以加上24px即可，如果是在谷歌中既可以設置滾動條寬度，或者設置overflow：overlay 也可(不過這個屬性在IE中不兼容)

總結

以上是生活随笔為你收集整理的html自定义滚动条不占位,如何实现滚动条在各浏览器中不占用布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。