ajhongshaorou 2019-06-29
overflow: visible(默认)|hidden|scroll|auto|inherit
当overflow-x 与 overflow-y值相同时,等同于overflow
当overflow-x 与 overflow-y值不相同时,其中一个值被赋予hidden|auto|scroll时,若另一个值为visible,
那这个visvible会被重置为auto
https://codepen.io/curlywater...
元素非 display: inline
对应方位的尺寸限制: width/height/max-width/max-height/absolute拉伸
对于单元格等, 需要 table 为 table-layout: fixed 状态才可以
页面默认滚动条来自html(与body无关),因此若要去除默认滚动条,只需要
html { overflow: hidden; }
获取滚动高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; /* chrome浏览器:document.body.scrollTop */ /* 其他浏览器:document.documentElement.scrollTop*/
除Chrome之外的其他浏览器会有padding-bottom缺失效果,将导致scrollHeight值不一致
滚动条宽度机制
水平居中跳动问题,容器定宽居中时,当视口高度变化导致滚动条出现将导致容器跳动。
解决方法:
自定义滚动条
自定义滚动条插件
iOS原生滚动回调
-webkit-overflow-scrolling: touch;
overflow: visible不会产生BFC
overflow: hidden|scroll|auto 产生BFC,但是具有溢出不可见的副作用
overflow失效:绝对定位元素不总是被overflow元素剪裁/随滚动条滚动,尤其当overflow元素处于绝对定位元素和其包含块中间时
避免失效的方法:
text-overflow: ellipsis
以overflow: hidden
为前提锚点技术的实质时容器改变滚动高度