在一般瀏覽器中卵皂，當(dāng)內(nèi)容超出容器時(shí)，如果不是overflow:hidden竖席，通常都會(huì)出現(xiàn)滾動(dòng)條，由于滾動(dòng)條并不是浮在布局內(nèi)容之上敬肚，所以通常會(huì)帶來(lái)兩個(gè)問題：
- 1毕荐，容器內(nèi)部?jī)?nèi)容寬度固定，恰好撐滿艳馒，此時(shí)出現(xiàn)滾動(dòng)條會(huì)把內(nèi)容擠到下一行(如圖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，容器內(nèi)容百分比計(jì)算弄慰，自適應(yīng)寬度第美，鼠標(biāo)經(jīng)過(guò)出現(xiàn)滾動(dòng)條，鼠標(biāo)離開滾動(dòng)條消失陆爽，會(huì)出現(xiàn)中間內(nèi)容晃動(dòng)(如圖2.gif)
注：相對(duì)于上面的變化部分什往，僅是將內(nèi)部div寬度設(shè)為百分比自適應(yīng)
.container div{
width:calc(100% - 6px);
}
2.gif
那么我們?nèi)绾蝸?lái)解決這兩個(gè)問題呢？
我門可以在DOM布局中做些修改墓陈，在container內(nèi)部再添加一層class="inner-container"的容器恶守，并讓其寬度=width(container)+width(scroller),如此便不會(huì)在出現(xiàn)滾動(dòng)條的時(shí)候?qū)?nèi)容擠下去了，代碼如下
<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中的滾動(dòng)條寬度是24px*/
.inner-container{
width:calc(100% + 24px);
}
原理即是贡必，讓包裹子元素內(nèi)部容器inner-container比外部容器container 的寬度大于一個(gè)滾動(dòng)條寬度兔港，這樣即使?jié)L動(dòng)條出現(xiàn)也不會(huì)影響子元素。
一般來(lái)說(shuō)windows下IE的滾動(dòng)條寬度為24px仔拟，所以加上24px即可衫樊，如果是在谷歌中既可以設(shè)置滾動(dòng)條寬度，或者設(shè)置overflow：overlay 也可（不過(guò)這個(gè)屬性在IE中不兼容）
