弹出层完美禁止页面滚动

CntChen 发布于2019-08-29 12:17 / 1900人阅读

摘要：页面中经常会遇到弹出层的部件，当弹出层激活时覆盖整个页面，且背景部分不能滚动。

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

弹出层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...

云服务器 GPU云服务器弹出层 fancybox弹出层 frameset弹出层 html弹出层

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111790.html

弹出层完美禁止页面滚动

摘要：页面中经常会遇到弹出层的部件，当弹出层激活时覆盖整个页面，且背景部分不能滚动。页面中经常会遇到弹出层的部件，当弹出层激活时覆盖整个页面，且背景部分不能滚动。实现起来有以下要点：弹出层position设置为fixed，四个定位锚点均设为0；激活弹出层时给html和body设置overflow: hidden;；以下是实践： codepen 为了让彻底禁止滚动，还可以在mous...

AprilJ 2019-08-20 15:19 评论0 收藏0
弹出层完美禁止页面滚动

摘要：页面中经常会遇到弹出层的部件，当弹出层激活时覆盖整个页面，且背景部分不能滚动。页面中经常会遇到弹出层的部件，当弹出层激活时覆盖整个页面，且背景部分不能滚动。实现起来有以下要点：弹出层position设置为fixed，四个定位锚点均设为0；激活弹出层时给html和body设置overflow: hidden;；以下是实践： codepen 为了让彻底禁止滚动，还可以在mous...

jsbintask 2019-08-01 16:34 评论0 收藏0
弹出遮罩层后，如何禁止底层页面的滚动

摘要：但是，我们会发现，当弹出遮罩层后，底层的内容也是可以滚动，显然这不是我们想要的效果，而这个问题就是小萌最近开发项目时遇到的问题。弹窗是一种常见的交互方式，而蒙层则是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，我们会发现，当弹出遮罩层后，底层body的内容也是可以滚动，显然这不是我们想要的效果，而这个问题就是小萌最近开发项目时遇到的问题。一个小程序的项目，是用MPV...

betacat 2019-04-23 13:24 评论0 收藏0
兼容移动端 js弹出框实现微信禁止h5禁止网页下拉，滚动穿透，禁止微信内置浏览器下拉网页

摘要：弹出层触发时候页面设置为高度百分百将不能滚动设置的样式为取消时候把样式重置还原为最初弹出层遮罩层灰色区域点击关闭遮罩层遮罩层阻止冒泡默认事件弹出层禁止页面弹出框弹出时候市面下拉滚动监听事件，这样一来整个页面将不能滚动所以添加一个判断你的大盒 //弹出层触发时候页面设置为高度百分百将不能滚动设置body html的样式为overflow: hidden,height:100%//取消时...

robin 2019-08-30 15:56 评论0 收藏0
兼容移动端 js弹出框实现微信禁止h5禁止网页下拉，滚动穿透，禁止微信内置浏览器下拉网页

摘要：弹出层触发时候页面设置为高度百分百将不能滚动设置的样式为取消时候把样式重置还原为最初弹出层遮罩层灰色区域点击关闭遮罩层遮罩层阻止冒泡默认事件弹出层禁止页面弹出框弹出时候市面下拉滚动监听事件，这样一来整个页面将不能滚动所以添加一个判断你的大盒 //弹出层触发时候页面设置为高度百分百将不能滚动设置body html的样式为overflow: hidden,height:100%//取消时...

inapt 2019-08-26 13:35 评论0 收藏0