如何解决遮罩层下的内容滚动问题

最新推荐文章于 2024-05-21 15:42:43 发布

原创最新推荐文章于 2024-05-21 15:42:43 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

前端同时被 2 个专栏收录

9 篇文章

订阅专栏

React

2 篇文章

订阅专栏

本文介绍了一种通过将 body 定位为 fixed 来阻止页面滚动同时保持滚动条可见且页面布局不变的方法。该方法使用 JavaScript 实现，在需要禁止滚动时记录当前滚动位置并设置 body 的 position 和 top 属性，在取消禁止时恢复这些属性并返回到原来的滚动位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

推荐方法

给body fixed定位，即可屏蔽滚动，仍保留滚动条，页面不会变形

  stopBodyScroll = (isFixed) => {
    let bodyEl = document.body
    let top = 0
    if (isFixed) {
      top = window.scrollY
      bodyEl.style.position = 'fixed'
      bodyEl.style.top = -top + 'px'
      this.setState({top: top})
    } else {
      bodyEl.style.position = ''
      bodyEl.style.top = ''

      window.scrollTo(0, this.state.top) // 回到原先的top
    }
  }

记得，取消这一状态