禁用滚动,但不隐藏react js的滚动条?

55ooxyrt  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(353)

我正在为我的应用程序使用next js。我有一个登录模式为我的应用程序,我想修正下躺着的页面,不滚动,而它是打开的。我可以用计算机解决这个问题 document.body.style.overflow = 'hidden' 当模态打开时,但随后网站跳转以占据卷轴所在的空间。
我想保留滚动条,但禁用滚动。我在组件中调用模态,所以css属性 overflow:hidden 仅适用于各个组件。有没有一种方法可以让我实现我想要实现的目标?

j9per5c4

j9per5c41#

这将解决你的问题:身体{位置:固定;溢出-y:scroll}

m4pnthwp

m4pnthwp2#

您可以只向onscroll添加一个事件,然后跟踪当前的scrolltop、scrollleft(如果您也需要处理水平),然后在不需要滚动时将滚动重置为这些存储值。
如果选中“大”复选框时运行下面的代码段,则禁用滚动。

const div = document.querySelector('div');
const cb = document.querySelector('input');

let lastY = 0;

div.innerText =  new Array(3000).fill().map(m => 'hello ').join(' ');

div.addEventListener('scroll', (e) => {
  if (cb.checked) {
    e.target.scrollTop = lastY;
  } else lastY = e.target.scrollTop;
});

cb.addEventListener('click', () => {
  console.log('click');
});
div {
  height: 150px;
  overflow: auto;
}
input {
  position: fixed;
  top: 50px;
  left: 50px;
  transform: scale(4);
}
<div>
</div>
<input type="checkbox"/>

相关问题