1.重置现象
当overflow-x 与 overflow-y值相同时 ，等同于overflow
当overflow-x 与 overflow-y值不相同时，且其中一个值为visible,另一个被赋予hidden,auto,scroll时
那这个visvible会被重置为auto;
2.overflow：visible妙用
image.png
滚动条出现条件
1.overflow：auto/overflow:scroll
有些元素天生自带滚动条：<html> <textarea>
2.内容尺寸超出容器限制
body/html与滚动条
无论什么浏览器，默认滚动条均来自<html> 而不是<body>标签
image.png
IE7-浏览器默认： html
{ overflow-y: scroll }IE8+浏览器默认： html
{ overflow:auto }
所以，如果想要去掉页面默认滚动条，只需要：
html { overflow: hidden; }
而没必要吧<body>也拉下水
html
, body{ overflow: hidden }
如何获取滚动高度
Chrome浏览器是： document.body.scrollTop
其他浏览器是： document.documentElement.scrollTop
目前两者不会同时存在，因此，坊间流传这类写法：
var st = document.body.scrollTop+document.documentElement.scrollTop；
建议使用
var st = document.body.scrollTop || document.documentElement.scrollTop
获取滚动条宽度
//获取浏览器滚动条宽度
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.滚动条会占用容器尺寸，原本和谐的布局，可能因为滚动条出现后发生问题（尽量使用自适应布局，或者预留滚动条的宽度）
2.水平居中跳动的问题（滚动条出现时，水平居中是内容会发生移动，这样页面切换时，会产生内容上的跳动感）
如何修复：
- 给页面添加滚动栏 html{ overflow-y：scroll;}
- 增加padding-left动态修复
container { padding-left: calc(100vw - 100%) }
100vw ---- 浏览器宽度
100% ---- 可用内容宽度
相减得到滚动的宽度，无论滚动栏出现不出现，容器都有一个滚动栏的偏移，位置不会发生变化，此方法IE9+支持
自定义滚动条-webkit内核
image.png
jQuery自定义滚动条插件
项目页面：http://manos.malihu.gr/jquery-custom-content-scroller/
Github地址：https://github.com/malihu/malihu-custom-scrollbar-plugin
清除浮动
.clearfloat{zoom:1}
.clearfloat:after{display:block;clear:both;content:"";}
网友评论