如何在保持滚动条可见的同时禁用滚动？-css教程-PHP中文网

如何在保持滚动条可见的同时禁用滚动？

Mary-Kate Olsen

发布： 2024-12-26 10:06:16

原创

566 人浏览过

How Can I Disable Scrolling While Keeping the Scrollbar Visible?

在禁用滚动时保留滚动条可见性

虽然可以使用 Overflow:hidden 来隐藏滚动条，但这种方法可能会在您的网站上产生视觉变化。如果您想在不影响可见性的情况下禁用滚动，请按以下步骤操作：

固定页面位置：

如果叠加层下方的页面可以固定在顶部，请应用打开叠加层时遵循 CSS：

body {
  position: fixed;
  overflow-y: scroll;
}

登录后复制

这将保留滚动条可见性，但阻止内容滚动。要在覆盖关闭时恢复滚动，请使用以下 CSS：

body {
  position: static;
  overflow-y: auto;
}

登录后复制

保留滚动位置：

如果页面已预先滚动，请获取 document.documentElement.scrollTop使用 JavaScript。动态地将此值分配为 body 元素的顶部属性。这将在整个叠加层持续时间内保持当前滚动位置。

CSS:

.noscroll {
  position: fixed;
  top: var(--st, 0);
  inline-size: 100%;
  overflow-y: scroll;
}

登录后复制

JS:

const b = document.body;
b.style.setProperty('--st', -(document.documentElement.scrollTop) + "px");
b.classList.add('noscroll');

登录后复制

以上是如何在保持滚动条可见的同时禁用滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！