如何禁用正文滚动条而不隐藏它？

在保留可见性的同时禁用 HTML/Body 滚动条

为了获得最佳的灯箱体验，人们可能希望暂时禁用父元素的滚动条而不隐藏它。要实现此目的，请考虑以下方法：

修复父元素：

打开灯箱时，将以下 CSS 属性分配给叠加层下方的页面：

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

这会修复页面的位置并限制垂直滚动到页面本身，同时保持滚动条的可见性。

灯箱关闭时重置：

关闭灯箱时，恢复原始 CSS 属性：

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

处理现有的滚动：

要保留页面当前的滚动位置，在打开lightbox之前使用JavaScript获取文档的scrollTop值并将其指定为body元素的top属性：

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

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

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