弹出层圆满制止页面转动

2024年4月13日 133次阅读 来源: 方泉水很甜

页面中经常会碰到弹出层的部件，当弹出层激活时掩盖全部页面，且背景部份不能转动。完成起来有以下要点：

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

  • 激活弹出层时给html和body设置overflow: hidden;；

以下是实践：

codepen

为了让完全制止转动，还能够在mousewheel和touchmove事宜（离别对应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…

    原文作者：方泉水很甜
    原文地址: https://segmentfault.com/a/1190000008793166
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞