模式打开时禁用（注意隐藏）垂直滚动

Question

当模态打开时，保持垂直滚动并不理想。这就是为什么在我的组件的 useEffect 中我这样做了：

if (state.modal) {
  document.body.style.overflow = "hidden";
  document.body.style.paddingRight = "17px";
}

return () => {
  document.body.style.overflow = "unset";
  document.body.style.paddingRight = "0px";
};

虽然隐藏了滚动条，但现在的问题是，因为滚动条的隐藏和显示，浏览器被移动了。

因此，我想保留滚动条，但在模式打开时将其禁用。

Answer 1

这是解决这个问题的方法。希望有用。

在您的 useEffect 上执行以下操作：

if (state.modal) {
  document.body.style.position = "fixed";
  document.body.style.width = "100%";
  document.body.style.overflowY = "scroll";
}

return () => {
  document.body.style.position = "static";
  document.body.style.overflow = "unset";
};

模式打开时禁用（注意隐藏）垂直滚动

disable (note hide) vertical scroll when the modal is open

javascript

css

modal-dialog

reactjs