0%

滚动条跳动问题

通过js 控制页面的 overflow: hidden 与 overflow: auto 切换的时候,由于页面总宽度变化导致文档跳动。

解决方案一: (纯CSS)

在页面主体元素上加上

1
margin-left: calc(100vw - 100%) !important;

这个方法需要一个定宽的主体元素,例如总的 wrap。
如果不是定宽而是自适应的,就会在左边出现与滚动条同宽的空白列。

其次: calc是CSS3中的计算,IE10+浏览器支持

解决方案二: (JS控制)

通过设置 body 的scroll:hidden 与 padding-left 达到类似的效果

在打开 模态框的时候, 设置

1
2
body.paddingRight: window.innerWidth - document.documentElement.clientWidth,
body.overflowY: 'hidden'

关闭模态框的时候,设置

1
2
body.paddingRight: 0,
body.overflowY: auto

即可。

innerWidth有兼容性问题, IE8无法正常使用.

解决兼容性的方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getScrollBarWidth () {
var oP = document.createElement('p'),
styles = {
width: '100px',
height: '100px'
}, i, clientWidth1, clientWidth2, scrollbarWidth;
for (i in styles) oP.style[i] = styles[i];
document.body.appendChild(oP);
clientWidth1 = oP.clientWidth;
oP.style.overflowY = 'scroll';
clientWidth2 = oP.clientWidth;
scrollbarWidth = clientWidth1 - clientWidth2;
oP.parent.removeChild(oP);
return scrollbarWidth;

}