移动端滚动穿透问题

最新推荐文章于 2024-02-29 13:21:00 发布

文仟传输助手

最新推荐文章于 2024-02-29 13:21:00 发布

阅读量108

点赞数

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/weixin_45072479/article/details/130486644

版权

当底部半弹层内容滚动到底部，弹层内滚动条消失后，可通过将弹层DOM移动到body同层，并在打开弹层时设置body无法滚动，关闭时恢复，以防止底层页面误触发滚动。这种方法可以确保弹层内容在需要时能正确滚动。

摘要由CSDN通过智能技术生成

背景：底部半弹层内容滚动到底部，弹层内滚动条消失后，再次滑动，此时底层页面触发滚动，弹层内容无法滚动
解决思路：将弹层dom写/移动到body同层，弹层弹出时候设置body无法滚动
代码：

      let target = document.querySelector('#tanceng')
      target && target.remove()
      if ('打开弹层') {
        document.documentElement.appendChild(target)
        document.body.style.overflow = 'hidden'
        document.body.style.height = document.documentElement.clientHeight
      } else {
      	// 如果之前弹层不在body同层，移动后需要复位（也可以设置一直在body同层，但是要注意不要多次放置到body同层）
        document.querySelector('.view').appendChild(target)
        document.body.style.overflow = 'auto'
        document.body.style.height = '100%'
      }