如何在不隱藏捲軸的情況下防止捲軸滾動？

防止滾動條在不隱藏的情況下滾動

實現燈箱時的一個常見挑戰是需要暫時禁用父頁上的滾動條而不求助於溢出：隱藏；。此解決方案可能會導致意外的跳躍和空間佔用。

值得慶幸的是，有一種可行的方法可以在顯示捲軸的同時停用它們。透過利用覆蓋層下方的元素的固定定位，可以實現這種效果。啟動疊加層後，將以下樣式套用至正文：

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中文網其他相關文章！