js使弹层下面的body禁止滚动

2024-03-31 20:22:00

弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。

1.新建utils/modalHelper.js文件

// 解决遮罩层滚动穿透问题，分别在遮罩层弹出后和关闭前调用
let _scrollTop
class ModalHelper {
  // popup 显示时调用
  static afterOpen () {
    _scrollTop = document.scrollingElement.scrollTop
    document.body.style.position = 'fixed'
    document.body.style.top = -_scrollTop + 'px'
  }

  // popup 关闭时调用
  static beforeClose () {
    document.body.style.position = ''
    document.body.style.top = ''
    // 使 scrollTop 恢复原状
    document.scrollingElement.scrollTop = _scrollTop
  }
}

export default ModalHelper

2.main.js中全局引入ModalHelper

import ModalHelper from './utils/modalHelper'
Vue.prototype.$modalHelper = ModalHelper

3.vue页面使用

isPayment1(val) {
  if (val) {
    this.$modalHelper.afterOpen(); // 打开禁用
  } else {
    this.$modalHelper.beforeClose(); // 关闭禁用
  }
},

4.为避免用户使用按键返回，需在页面离开时移除禁用即可

beforeRouteLeave (to, from, next) {
  this.$modalHelper.beforeClose()
  next()
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JavaScript实现移动端弹窗后禁止滚动

代码如下 computed:{ popupStatus(){ return this.SendCircle_visible || this.generateInfo_visible || this.isPosterShow; } }, methods:{ stopTouch(e){ e.preventDefault(); }, }, watch: { popupStatus(val) { let preD = this.stopTouch; let options = { passive: fa
javascript实现蒙版与禁止页面滚动

本文实例为大家分享了javascript实现蒙版与禁止页面滚动的具体代码,供大家参考,具体内容如下项目需求:页面很长,要求加个蒙版,点击特定位置蒙版消失可以滑动页面,否则蒙版存在页面不可以滑动:要同时兼容移动端和pc端. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=viewport content="
js实现鼠标滑动到某个div禁止滚动

本文实例为大家分享了js实现鼠标滑动到某个div禁止滚动的具体代码,供大家参考,具体内容如下项目中碰到一个场景就是当鼠标滑倒某个div的时候,滑动鼠标页面不再滚动. 这里主要是当鼠标滑动到该div时,监听滚轮事件并通过preventDefault()事件来阻止滚动事件,以下是例子 eg: #wrap { position:absolute; top:200px; background:#000000; font-size: 40px; width:50vw; text-align: cente
js使弹层下面的body禁止滚动

弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这不是我们想要的效果,因此需要阻止这种行为. 1.新建utils/modalHelper.js文件 // 解决遮罩层滚动穿透问题,分别在遮罩层弹出后和关闭前调用 let _scrollTop class ModalHelper { // popup 显示时调用 static afterOpen () { _sc
js 右侧浮动层效果实现代码(跟随滚动)

实现代码一. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <!--**
小巧强大的jquery layer弹窗弹层插件

先去官网下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js 触发弹层的事件可自由绑定,如: $('#id').on('click', function(){ layer.msg('test'); }); 下面主要贴出上述例子的调用代码: [信息框]: layer.alert('白菜级别前端攻城师贤心', 8); //风格一 layer.msg('前端攻城师贤心'); //风格二 //当然,远远不止这两种风格. [
js登录弹出层特效

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
js实现遮罩层弹出框的方法

本文实例讲述了js实现遮罩层弹出框的方法.分享给大家供大家参考.具体分析如下: 昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊: 复制代码代码如下: <style> #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #f
弹出遮罩层后禁止滚动效果【实现代码】

方法一: $('.shade').bind( "touchmove", function (e) { e.preventDefault(); }); 方法二: $("body,.main").height($(window).height()).css({ "overflow-y": "hidden" }); 以上这篇弹出遮罩层后禁止滚动效果[实现代码]就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我
weUI应用之JS常用信息提示弹层的封装

weUI应用,自己用JS封装了几个常用的信息提示的弹层测试页面的代码在后面有贴出几个弹层如下图 HTML页面代码: <!DOCTYPE html> <html> <head> <title>weUI-test</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,c
jQuery弹层插件jquery.fancybox.js用法实例

本文实例讲述了jQuery弹层插件jquery.fancybox.js用法.分享给大家供大家参考,具体如下: fancybox是jquery的插件,功能强大.支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,除了能展示层外,还可以展示iframed内容, 通过css订制样式.配合其他插件,能实现更旋的效果. 这里给出官方下载以及实例地址:http://fancyapps.com/fancybox/ 附带给出本站下载地址. 到目前为止,fancybox的最新版本2.1.5,调用方法
使用原生JS实现弹出层特效

创建遮罩层复制代码代码如下: _createCover: function() { var newMask = document.createElement("div"); newMask.id = this._mark; newMask.style.position = "absolute"; newMask.style.zIndex = "100"; _scrollWidth =

js使弹层下面的body禁止滚动

相关推荐

随机推荐