1.重置現(xiàn)象
當(dāng)overflow-x 與 overflow-y值相同時(shí) ，等同于overflow
當(dāng)overflow-x 與 overflow-y值不相同時(shí)，且其中一個(gè)值為visible,另一個(gè)被賦予hidden,auto,scroll時(shí)
那這個(gè)visvible會(huì)被重置為auto;
2.overflow：visible妙用
滾動(dòng)條出現(xiàn)條件
1.overflow：auto/overflow:scroll
有些元素天生自帶滾動(dòng)條：<html> <textarea>
2.內(nèi)容尺寸超出容器限制
body/html與滾動(dòng)條
無(wú)論什么瀏覽器，默認(rèn)滾動(dòng)條均來(lái)自<html> 而不是<body>標(biāo)簽
IE7-瀏覽器默認(rèn)： html
{ overflow-y: scroll }IE8+瀏覽器默認(rèn)： html
{ overflow:auto }
所以，如果想要去掉頁(yè)面默認(rèn)滾動(dòng)條，只需要：
html { overflow: hidden; }
而沒(méi)必要吧<body>也拉下水
html
, body{ overflow: hidden }
如何獲取滾動(dòng)高度
Chrome瀏覽器是： document.body.scrollTop
其他瀏覽器是： document.documentElement.scrollTop
目前兩者不會(huì)同時(shí)存在，因此，坊間流傳這類寫法：
var st = document.body.scrollTop+document.documentElement.scrollTop；
建議使用
var st = document.body.scrollTop || document.documentElement.scrollTop
獲取滾動(dòng)條寬度
//獲取瀏覽器滾動(dòng)條寬度
var scrollbarWidth=function () {
var w1, w2, outer,inner;
outer = document.createElement('div');
inner = document.createElement('div');
outer.appendChild(inner);
outer.style.display = 'block';
outer.style.position = 'absolute';
outer.style.width = '50px';
outer.style.height = '50px';
outer.style.overflow = 'hidden';
inner.style.height = '100px';
inner.style.width = 'auto';
document.body.appendChild(outer);
w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
w2 = inner.offsetWidth;
if (w1 === w2) {
w2 = outer.clientWidth;
}
document.body.removeChild(outer);
return w1 - w2;
}
overflow:auto的潛在布局隱患
1.滾動(dòng)條會(huì)占用容器尺寸，原本和諧的布局，可能因?yàn)闈L動(dòng)條出現(xiàn)后發(fā)生問(wèn)題（盡量使用自適應(yīng)布局，或者預(yù)留滾動(dòng)條的寬度）
2.水平居中跳動(dòng)的問(wèn)題（滾動(dòng)條出現(xiàn)時(shí)，水平居中是內(nèi)容會(huì)發(fā)生移動(dòng)，這樣頁(yè)面切換時(shí)，會(huì)產(chǎn)生內(nèi)容上的跳動(dòng)感）
如何修復(fù)：
- 給頁(yè)面添加滾動(dòng)欄 html{ overflow-y：scroll;}
- 增加padding-left動(dòng)態(tài)修復(fù)
container { padding-left: calc(100vw - 100%) }
100vw ---- 瀏覽器寬度
100% ---- 可用內(nèi)容寬度
相減得到滾動(dòng)的寬度，無(wú)論滾動(dòng)欄出現(xiàn)不出現(xiàn)，容器都有一個(gè)滾動(dòng)欄的偏移，位置不會(huì)發(fā)生變化，此方法IE9+支持
自定義滾動(dòng)條-webkit內(nèi)核
jQuery自定義滾動(dòng)條插件
項(xiàng)目頁(yè)面：http://manos.malihu.gr/jquery-custom-content-scroller/
Github地址：https://github.com/malihu/malihu-custom-scrollbar-plugin
清除浮動(dòng)
.clearfloat{zoom:1}
.clearfloat:after{display:block;clear:both;content:"";}
