如何在不隐藏滚动条的情况下防止滚动条滚动？

防止滚动条在不隐藏的情况下滚动

实现灯箱时的一个常见挑战是需要暂时禁用父页面上的滚动条而不求助于溢出：隐藏；。此解决方案可能会导致意外的跳转和空间占用。

值得庆幸的是，有一种可行的方法可以在显示滚动条的同时禁用它们。通过利用覆盖层下方的元素的固定定位，可以实现这种效果。激活叠加层后，将以下样式应用于正文：

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

这将显示滚动条但禁用其功能。要在关闭覆盖层时恢复此更改，只需恢复原始样式：

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

如果页面已经滚动，则通过 JavaScript 捕获当前滚动位置并将其设置为页面的 top 属性body 元素确保当覆盖层被激活时页面保持在当前滚动位置。这可以通过以下 CSS 和 JS 来实现：

.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中文网其他相关文章！