最近项目中有一个需求,是鼠标上移播放器之后,页面中的内容不可以滚动(做事件的处理),这个需求是达到了,但是引起一个bug,就是每次移入移出,页面都会抖动一下,我从网上找了下,觉得下面的这种处理的不错,所有分享一下。
css部分:
.modal-measure-scrollbar {
/*这个很重要,一定要加一下*/
box-sizing: border-box;
position: absolute;
height: 100px;
width: 100px;
top: -3000px;
left: -3000px;
overflow: scroll;
z-index: 1000;
overflow-y: scroll;
}
.modal-measure-scrollbar .inner {
box-sizing: border-box;
height: 200px;
}
js部分:
var a = $('<div class="modal-measure-scrollbar"></div>').prependTo($("body")),
b = $('<div class="inner"></div>').appendTo(a),
//c就是滚动条的宽度
c = a.width() - b.width();
a.remove();
$("head").append('<style id="scrollbar-width"> .compensate-for-scrollbar{ margin-right:' + c + 'px } </style>');
我就可以在js中移入的时候添加compensate-for-scrollbar,移出的时候删除compensate-for-scrollbar这个class就可以达到页面不滚动的效果了。
这个是参考网上的一个大神的博客,但是他的代码单独拿出来做dome有问题,所以单独写篇博客记录一下。