如何在保持捲軸可見的同時停用滾動？

在停用滾動時保留滾動條可見性

雖然可以使用Overflow:hidden 來隱藏滾動條，但這種方法可能會在您的網站上產生視覺變化。如果您想在不影響可見性的情況下停用捲動，請按以下步驟操作：

固定頁面位置：

如果疊加層下方的頁面可以固定在頂部，請應用開啟疊加層時遵循CSS：

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

這將保留捲軸可見性，但阻止內容滾動。若要在覆蓋關閉時恢復滾動，請使用以下CSS：

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

保留滾動位置：

如果頁面已預先滾動，請取得document.documentElement. scrollTop使用JavaScript。動態地將此值指派為 body 元素的頂部屬性。這將在整個疊加層持續時間內保持當前滾動位置。

CSS:

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

JS:

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

以上是如何在保持捲軸可見的同時停用滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！