码迷,mamicode.com
首页 > 其他好文 > 详细

弹出层完美禁止页面滚动

时间:2020-03-19 17:49:05      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:for   license   背景   rop   body   页面   osi   http   ids   

页面中经常会遇到弹出层的部件,当弹出层激活时覆盖整个页面,且背景部分不能滚动。实现起来有以下要点:

  • 弹出层position设置为fixed,四个定位锚点均设为0;

  • 激活弹出层时给htmlbody设置overflow: hidden;

以下是实践:

codepen

为了让彻底禁止滚动,还可以在mousewheeltouchmove事件(分别对应PC和移动端)中调用preventDefault()方法:

function forbidScroll(e) {
    e.preventDefault && e.preventDefault();
    e.returnValue = false;
    e.stopPropagation && e.stopPropagation();
    return false;
}

需要注意的是:chrome默认将touchmove事件视为passive,目的是提高用户体验,让处理一般事件时页面一样可以滚动,所以addEventListener的第三个参数需设置为:

{
    passive:false
}

以面向对象的方式实现的结果:

codenpen

使用es6再次重构:

codenpen

原文:http://codepen.io/zhaojun/pos...

弹出层完美禁止页面滚动

标签:for   license   背景   rop   body   页面   osi   http   ids   

原文地址:https://www.cnblogs.com/baimeishaoxia/p/12525779.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!