Web开发中如何禁用滚动条而不隐藏它们？

禁用滚动条而不隐藏它们

在 Web 开发中，有时需要在使用灯箱时禁用父元素上的滚动条。然而，仅仅使用overflow:hidden来隐藏滚动条通常是不可取的，因为它可能会导致网站跳转并占据滚动条所在的空间。

有一个可行的解决方案，允许在仍然显示的同时禁用滚动条他们。如果灯箱下的页面可以位于顶部，则可以使用以下 CSS 代码：

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

这将显示滚动条，但阻止内容滚动。要在关闭灯箱后恢复滚动条，只需恢复这些属性：

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

此方法不需要修改滚动事件。

解决预先存在的滚动位置

如果在打开灯箱之前页面已经滚动，您可以通过 JavaScript 检索当前滚动位置并将其指定为 body 元素的 top 属性。这将在灯箱使用期间保持当前滚动位置。

CSS

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

JavaScript

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

通过实施此解决方案，您可以有效地禁用滚动条而不隐藏它们，从而保留网页的预期视觉呈现。

以上是Web开发中如何禁用滚动条而不隐藏它们？的详细内容。更多信息请关注PHP中文网其他相关文章！