在弹窗内滚动鼠标会触发页面的滚动条滚动,这就是鼠标滚动穿透事件
1.js解决
var eventType ='wheel';
//兼容火狐浏览器
if(document.mozHidden !==undefined){
eventType = 'DOMMouseScroll';
}
//test为弹窗的id
$('#test').on(eventType, function(e){
var scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = this.clientHeight;
var wheelDelta = (e.originalEvent.wheelDetal)? (e.originalEvent.wheelDetal): -(e.originalEvent.detail || 0);
if((wheelDetal >0 && scrollTop <= wheelDetal) || (wheelDetal < 0 && scrollHeight - height - scrollTop <= -1 * wheelDetal)){
// IE浏览器下滚动会跨越边界直接影响父级滚动,因此,临界时候手动边界滚动定位
this.scrollTop = wheelDetal > 0 ? 0 : scrollHeight;
e.preventDefault();
}
});
2,窗口加载完成时,给body元素添加一个类.scrollHidden{overflow:hidden;height:100%},
关闭弹窗时,移除.scrollHidden类
这种方法会有个缺点,关闭弹窗时若页面有滚动条,页面会动一下,因为页面宽度不包括滚动条的宽度