滚动穿透

最新推荐文章于 2024-02-29 13:23:55 发布
最新推荐文章于 2024-02-29 13:23:55 发布
阅读量413 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36454089/article/details/99299522
版权

什么是滚动穿透：弹出层滚动时，弹出层下的body跟着滚动

解决方法:

方法一 :  position:fixed

    1.打开模态框时，给body加上类名preventScroll； -
    2.关闭模态框时，移除body上的preventScroll类名。

   问题 !  当关闭弹出框 , body 的滚动位置会丢失还原为0，也就是body 的ScrollTop 属性值会变为 0

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>滚动穿透</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    .box {
      width: 100%;
      height: 100%;
    }

    p:nth-child(even) {
      width: 100%;
      height: 90px;
      background: pink;
    }

    p:nth-child(odd) {
      width: 100%;
      height: 90px;
      background: skyblue;
    }

    .module {
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background: rgba(0, 0, 0, .3);
      display: none;
      overflow-y: auto;
    }

    .module p:nth-child(even) {
      width: 80%;
      height: 90px;
      background: red;
      opacity: 0.3;
    }

    .module p:nth-child(odd) {
      width: 80%;
      height: 90px;
      background: yellow;
      opacity: 0.3;
    }

    .close {
      width: 5%;
      height: 100%;
      background: rgba(51, 255, 0, 0.3);
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      right: 0;
    }


    /* 给 overflow:scroll 的元素加上一个 class (就是body) */
    .preventScroll {
      position: fixed;
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>0</p>
  </div>

  <div class="module">
    <div class="close">关闭</div>
  </div>


  <script src="./jquery-1.8.3.min.js"></script>
  <script>

    $('p').click(function () {
      $('.module').show()
      $('body').addClass('preventScroll')
    })

    // 移动端不支持双击事件 
    $('.close').on('click', function () {
      $('.module').hide()
      $('body').removeClass('preventScroll')
    })

  </script>
</body>

</html>

出现问题,弹出框出现,虽然解决滚动穿透,但是出现新的问题,body页面滚动位置为0

 

方法二:       position : fixed  +  scrollTop  

添加 .preventScroll 类之后会使body的滚动位置丢失 , 那么在显示弹框之前,把滚动位置保存下来,退出弹框之后设置回去

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>滚动穿透</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    .box {
      width: 100%;
      height: 100%;
    }

    p:nth-child(even) {
      width: 100%;
      height: 90px;
      background: pink;
    }

    p:nth-child(odd) {
      width: 100%;
      height: 90px;
      background: skyblue;
    }

    .module {
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background: rgba(0, 0, 0, .3);
      display: none;
      overflow-y: auto;
    }

    .module p:nth-child(even) {
      width: 80%;
      height: 90px;
      background: red;
      opacity: 0.3;
    }

    .module p:nth-child(odd) {
      width: 80%;
      height: 90px;
      background: yellow;
      opacity: 0.3;
    }

    .close {
      width: 5%;
      height: 100%;
      background: rgba(51, 255, 0, 0.3);
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      right: 0;
    }


    /* 给 overflow:scroll 的元素加上一个 class (就是body) */
    .preventScroll {
      position: fixed;
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>0</p>
  </div>

  <div class="module">
    <div class="close">关闭</div>
  </div>


  <script src="./jquery-1.8.3.min.js"></script>
  <script>

    $('p').click(function () {
      fixedBody()
      $('.module').show()
      $('body').addClass('preventScroll')
    })

    // 移动端不支持双击事件 
    $('.close').on('click', function () {
      $('.module').hide()
      $('body').removeClass('preventScroll')
      looseBody()
    })


    //打开模态框前调用
    function fixedBody() {
      var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      document.body.style.cssText += 'position:fixed;top:-' + scrollTop + 'px;';
    }

    //关闭模态框后调用
    function looseBody() {
      var body = document.body;
      body.style.position = 'static';
      var top = body.style.top;
      document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
      body.style.top = '';
    }

  </script>
</body>

</html>

大东哦哦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Html5 滚动穿透的方法
11-21
问题背景： 网站需要在移动端完成适配,针对移动端H5以及web端采用的都是bluma这种flex布局解决方案 在H5中使用的列表采用的是 react-virtualized 来绘制表格 为了展示表格中单行数据的具体详情，通常的解决方案是采用新页面或者是弹窗来完成。 这里采用的是弹窗的方案，点击单行数据后的数据详情用的是 bluma 的 modal-card。 具体细节和实例可以参考：https://bulma.io/documentation/components/modal/ 问题详情： 在点击单行数据后，弹窗显示详情数据，整个 modal-card 设置成 position:fixed;
滚动穿透解决方案
衣乌安、随笔
01-25 1268
在移动端弹出fixed弹窗的话，在弹窗上滑动会导致下层的页面跟着滚动，这个叫 “滚动穿透” 方案一 最粗暴的方式就是弹窗弹起后最外层的滚动容器html或者body设置overflow: hidden,来阻止滚动，随之带来的问题就是会导致页面滚动到顶部，之前用户的滚动位置会丢失 方案二、三、四。。。。 直接忽略。。。 终极方案 打开弹窗时，最外层的滚动容器html或者body设置position: fixed,同时记录打开前页面scrollTop，设置对应的滚动偏移top，当弹窗关闭时移除对应配置，同时恢复页
滚动穿透解决方法
Tyler_zch的博客
06-28 348
滚动穿透解决方法（在nutui组件库上get到的） let scrollTop = 0; let maskVisible = true; if (maskVisible) { // 遮罩层显示时 scrollTop = document.scrollingElement.scrollTop || document.body.scrollTop; Object.assign(document.body.style, { position: "fexed", top: -scroll
滚动穿透的6种解决方案【已自测】
weixin_34228387的博客
03-21 1826
在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动，这就是大家所说的“滚动穿透”。 而且经常是你在pc模拟器上没有问题，但是真机打开就一定会出现。 这个经典八阿哥也是面试时经常会被追问的问题。相信能看到这篇文章的你，已经是遇到了这个问题。我就不gif展示问题效果了。...
滚动穿透问题
weixin_30836759的博客
01-22 126
　　众所周知，移动端有fixed遮罩或弹出层时，屏幕上滑动，后面的背景也会跟着滚动，强迫症的我总是觉得不舒服。然而也没有找到完美的解决方法。 　　这里说说两种能用的方法。 　　1、遮罩或弹层没有滚动的内容时： 　　vue里提供了一个很好用的解决办法：@touchmove.prevent 　　如果不用vue的话，那就监听touchmove事件，然后阻止事件的默认行为（e.preventDef...
Vue项目移动端滚动穿透问题的实现
10-15
在移动端开发Vue项目时，常常会遇到一个常见的问题——滚动穿透（Scroll Passthrough）。这个问题指的是用户在页面某一层级（如导航栏、侧滑菜单）进行滚动操作时，滚动事件会穿透到页面的下一层级，导致下层内容也...
解决微信小程序中的滚动穿透问题
12-13
在微信小程序开发中，经常会遇到一个用户体验上的问题，即“滚动穿透”或称为“蒙层穿透”。这个问题发生在当用户打开一个使用`fixed`布局的蒙层（如弹窗）时，即使手指在蒙层上滑动，底部内容也会跟随滚动。这显然...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在某些场景下，我们可能需要实现滚动穿透或者阻止`scroll-view`的滚动，以达到特定的交互效果。本文将详细介绍如何在微信小程序中处理这些问题。 ### 1. 滚动穿透（Scroll Through） 滚动穿透通常发生在弹窗或半...
解决移动端滚动穿透问题
05-31
在移动Web开发中，"移动端滚动穿透问题"是一个常见的用户体验问题。当用户在页面上触发一个弹出层（如模态对话框、下拉菜单或加载遮罩层）时，通常希望页面主体部分在此期间不可滚动，以防止意外的滚动行为影响交互...
解决移动端滚动穿透
11-09
解决移动端面滚动穿透问题，以及不影响内容滚动，适合做弹窗
jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动
04-18
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难，只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如：我想要这里是弹出浮动遮罩层 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok').closeModel();就可以关闭层了 这个插件还有个好处是自动隐藏select控件，关闭后自动显示select控件 弹出层并随页面滚动而滚动
移动端 滚动穿透
weixin_43294560的博客
07-13 786
滚动穿透
解决滚动穿透
qq719756146的博客
11-30 179
思路很简单，就是弹出层打开时禁止body的滚动事件，弹出层关闭时恢复body的滚动事件 /解决页面层级相互影响滑动的问题/ closeTouch() { document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { ...
这一次，彻底解决滚动穿透
最新发布
男神的专栏
02-29 944
什么是滚动穿透如图所示，有一层遮罩蒙层覆盖在body上时，当我们滚动遮罩层，它下面的内容也会跟着一起滚动，看起来好像是上面的滚动事件穿透到下面的DOM元素上一样，我们称之为滚动穿透。
弹窗固定定位引起的滚动穿透
weixin_44204580的博客
07-10 655
弹窗固定定位引起的滚动穿透 如果直接给body添加固定定位，当出现滑动滚动条之后再出现弹窗这种情况时，页面会滚动到顶部，所以我们要记录滚动条的位置，无论是弹窗开启还是关闭都保证页面在滚动的位置 let scrollTop = 0; // 弹窗开启时调用 function forbidScroll() { scrollTop = document.documentElemen...
IPhone 、Webkit手机浏览器Div滚动、滑动卡，遮罩层被穿透的解决办法
ancong2859的博客
09-11 392
在滚动条的层上面加上-webkit-overflow-scrolling:touch;样式即可解决！ 转载于:https://www.cnblogs.com/xdoudou/p/3967012.html
滚动穿透问题探索
大转转FE
05-07 335
在移动端开发中，模态（Modal）弹窗可以说是非常之常见了，作为正在看这篇文章的你，可能写过基于Vue或者小程序的统一弹窗Modal组件；可能处理 过定宽高或者不定宽高的...
u-picker滚动穿透
06-01
如果您想要在使用 u-picker 组件时避免滚动穿透的问题，可以尝试以下方法： 1. 在打开 u-picker 组件之前，禁用页面的滚动条。可以使用以下 CSS 代码实现： ``` body { overflow: hidden; } ``` 2. 在关闭 u-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值