滾動欄迴轉

Mac開發者們，請注意這個小技巧：前往系統偏好設置> 通用> 顯示滾動條，並將設置更改為始終顯示。這並非為了您個人，而是為了網頁的最佳呈現效果。因為如果沒有此設置，您將無法體驗到滾動條觸發的佈局偏移，但其他所有啟用了此設置的用戶都會遇到。為了避免這類性能問題，您應該自己使用此設置。

Stefan Judis演示了視口單位的使用可能是導致此問題的原因之一：

代碼中100vw導致水平溢出，因為垂直滾動條已經存在，佔用了一部分空間。這感覺非常不合理，但事實就是這樣。

Stefan 指向Kilian Valkhof關於處理此問題的文章。經典的解決方法：

簡單的方法是使用width: 100% 。百分比不包含滾動條的寬度，因此會自動適應。

如果您無法這樣做，或者您正在設置另一個元素的寬度，請在周圍的元素上添加overflow-x: hidden或overflow: hidden來防止滾動條。

Kilian Valkhof , “如何查找水平滾動條的原因”

我認為這些都是權宜之計，因為它們都不能完全滿足您的需求。

幸運的是，即將出現一個基於規範的解決方案。 Bramus對此進行了報導：

在網頁上顯示滾動條時的副作用是，內容的佈局可能會根據滾動條的類型而改變。 scrollbar-gutter CSS 屬性（很快就會在Chromium 中發布）旨在讓我們開發者更好地控制這一點。

Bramus Van Damme , “使用scrollbar-gutter CSS 屬性防止滾動條導致的意外佈局偏移”

這聽起來像是解決方法，並且我毫不懷疑這將成為重置樣式表中非常常見的一行代碼：

 body {
  scrollbar-gutter: stable both-edges;
}

不過，這讓我想到……在處理整個頁面級別的滾動條問題時，是scrollbar-gutter屬性起作用，對嗎？而不是overflow屬性？過去在與滾動相關的方面， overflow屬性一直很奇怪。我們真的能在所有瀏覽器中實現它嗎？誰知道呢。看起來很有可能，但即使它很接近，並且行為符合規範，我也會嘗試使用它。感覺它很適合漸進增強。

以上是滾動欄迴轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！