html自定义滚动条不占位,如何实现滚动条在各浏览器中不占用布局

在一般浏览器中，当内容超出容器时，如果不是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: