如何停用正文滾動條而不隱藏它？

在保留可見性的同時停用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中文網其他相關文章！