如何实现滚动条在各浏览器中不占用布局

在一般浏览器中，当内容超出容器时，如果不是overflow:hidden，通常都会出现滚动条，由于滚动条并不是浮在布局内容之上，所以通常会带来两个问题：

• 1，容器内部内容宽度固定，恰好撑满，此时出现滚动条会把内容挤到下一行(如图1.gif)；

<div class='container'>
    <div></div>
    <div></div>
    <div></div>
 </div>

.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),如此便不会在出现滚动条的时候将内容挤下去了，代码如下

<div class='container'>
    <div class='inner-container'>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

.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中不兼容）