移动端禁止弹窗蒙层下页面滚动

第一种简单的方法:

在弹窗出现时,在 html 上添加 class:

  .open-model {

    overflow: hidden;

    height: 100%;

  }

弹窗消失时,再 remove class

代码示例(react):

  import React from ‘react‘

  import {css} from ‘glamor‘

  css.global(‘.open-model‘, {overflow: ‘hidden‘, height: ‘100%‘})

  componentDidUpdate() {

    const {isShowModel} = this.state

    if (document.body && document.body.classList) {

      if (isShowModel) {

        document

          .querySelectorAll(‘html‘)

          .forEach(node => node.classList.add(‘open-model‘))

      } else {

        document

          .querySelectorAll(‘html‘)

          .forEach(node => node.classList.remove(‘open-model‘))

      }

    }

  }

不足之处:弹窗消失后,页面会滚动到最顶部

第二种:弹窗蒙层下的页面不能滚动,同时,弹窗消失后,页面仍然停留在原位置,不会滚动到顶部

这就需要在弹窗出现时,保存此时的 scrollTop,即距离顶部的距离,在弹窗消失时,滚动到这个位置

代码示例(react):

const toggleBodyPosition = isFixedPosition => {

  const body = window.document.body

  if (isFixedPosition) {

    const scrollTop =

      window.pageYOffset ||

      document.documentElement.scrollTop ||

      document.body.scrollTop ||

      0

    body.style.position = ‘fixed‘

    body.style.top = `-${scrollTop}px`

  } else {

    body.style.position = ‘‘

    const top = -parseInt(body.style.top.replace(‘px‘, ‘‘))

    window.scrollTo(0, top)

    body.style.top = ‘‘

  }

}

export default toggleBodyPosition

在弹窗组件中 import toggleBodyPosition

componentWillMount() {

  toggleBodyPosition(true)

}

componentWillUnmount() {

  toggleBodyPosition(false)

}

原文地址:https://www.cnblogs.com/lee-xiumei/p/9179255.html

时间: 2024-10-08 06:08:04

移动端禁止弹窗蒙层下页面滚动的相关文章

移动端web页面滚动不流畅,卡顿闪烁解决方案

1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overflow-scrolling: touch 2.position属性导致的页面滚动不流畅问题: <div style="overflow-x: hidden; overflow-y: auto; position: absolute; height: 200px;"> <div style="position:

div随页面滚动遇顶固定的两种方法(js&amp;jQuery)

一.遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫"层的智能浮动效果".目前我们在国内的商业网站上就常常看到这样的效果了.例如淘宝网的搜索结果页的排序水平条,在默认状态时,该工具条是跟随页面滚动的,如下图: 而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟随页面滚动而滚动了,如下图: 类似的例子效果我们在别的网站上都有看到过,例如腾讯微博首页上,当我们下拉屏

vue页面禁止蒙层底部滚动

函数名 popupVisible,我是把这个方法放到vuex里面, 滚动高度用变量top表示 state: { pageLoad: !0, top: 0, // 页面滚动的高度 }, popupVisible(state, newValue) { if (newValue) { // 页面固定 state.top = window.scrollY; console.log("true--state.top", state.top); document.body.style.positi

移动端禁止页面下滑

背景: 本人开发移动端h5时,想让页面禁止向下滑动,最初的代码如下: html,body{ overflow: hidden; } 在chrome移动端调试工具中可以,但是用iphone的微信打开,失效了. 解决方案: 方法一: html,body{ position:fixed; overflow-y:hidden; } 方法二: html,body{ overflow: hidden; width: 100%; height:100%; } 参考资料:移动端如何禁用横向滚动条? - 前端开发

iOS开发之实现半透明蒙层背景效果[用于下拉菜单页和分享页]

郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 如果文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额随意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源码下载:点我传送 游戏官方下载:http://dwz.cn/RwTjl 游戏视频预览:http://dwz.cn/RzHHd 游戏开发博客:http://dwz.cn/RzJzI 游戏源码传送:http://dwz.cn/Nret1 如题,实现如下效果: 背景为半透明的蒙层效果,点击后背景消失. 实现蒙层的思路: 1.初始化UI

js禁止页面滚动

开发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面.如何实现呢,往下看 js实现整个页面禁止滚动: document.body.addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false }); //passive 参数不能省略,用来兼容ios和android passive是干吗用的呢,设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿.等待监听器的执

关于禁止页面滚动的实践(禁止滚轮事件)

禁止网页页面滚动只需要给document添加onmousewheel事件,然后在事件绑定函数当中设置e.preventDefault()就可以了,没错,就是芥末简单. 可是问题又来了,首先,onmousewheel是什么事件呢?它又有什么兼容性上的问题呢? 带着以上的两个问题,我通过查阅资料并且通过实践,得到了一下的认识. 1.onmousewheel是页面滚动事件,与onscroll不同的是,一般我们是通过onscroll来获取页面的滚动高度,然后添加相应的高度. 而onmousewheel,

js页面滚动时层智能浮动定位实现:

案例展示: 第一个:每个人都有看过的淘宝页面: 案例就不多说了,有兴趣的可以多去找找, 这样的智能浮动效果还是不错的,挺方便. 基本的实现原理: 首先有一个默认状态就是没有滚动的时候,什么事情也不用做,定位可以是absolute,也可以是stati,fixed,relartive 这些都可以.我们主要需要关注的是当浏览器滚动的时候,(要浮动的块)要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了.最好的position属性就是fixed了,可以在IE6+和其

css-dialog样式实现弹框蒙层全屏无需JS计算高度兼容IE7

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>css-dialog</title>  <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> </head><style type="