現代 Web 瀏覽器可讓開發人員使用 CSS 自訂捲軸的外觀，從而在保持功能的同時增強 Web 應用程式的視覺吸引力。本指南探討如何實作具有跨瀏覽器相容性的自訂捲軸。
首先，讓我們建立一個包含自訂捲軸的容器：
<div class="scrollbar-container">
<h3>Visible custom scrollbar</h3>
<p>
<!-- Content that creates scrollable overflow -->
</p>
</div>
可捲動容器需要特定的尺寸和溢出屬性：
.scrollbar-container {
height: 50%; /* Fixed height to enable scrolling */
width: 50%; /* Container width */
margin: 0 auto; /* Center the container */
overflow: auto; /* Enable scrolling */
padding: 1rem; /* Internal spacing */
}
對於基於 WebKit 的瀏覽器，我們使用 ::-webkit-scrollbar 偽元素：
.scrollbar-container::-webkit-scrollbar {
width: 4px; /* Width of the scrollbar */
background-color: white; /* Background color */
border-radius: 100vw; /* Rounded corners */
}
.scrollbar-container::-webkit-scrollbar-track {
background: white; /* Track color */
border-radius: 100vw; /* Rounded corners for track */
}
.scrollbar-container::-webkit-scrollbar-thumb {
background: plum; /* Scrollbar thumb color */
border-radius: 100vw; /* Rounded corners for thumb */
}
Firefox 需要使用不同的方法來使用捲軸寬度和捲軸顏色屬性：
@-moz-document url-prefix() {
.scrollbar-container {
scrollbar-width: thin; /* Width of the scrollbar */
scrollbar-color: fuchsia white; /* thumb and track colors */
}
}
實作包括幾個深思熟慮的設計選擇：
@import url(https://fonts.googleapis.com/css2?family=Rubik);
此範例使用 CSS 變數來實現一致的主題：
:root {
--primary-text-color: #222;
--secondary-text-color: #fff;
--primary-bg-color: #222;
--secondary-bg-color: #fff;
--tertiary-bg-color: #ddd;
}
自訂捲軸可以增強 Web 應用程式的視覺吸引力，同時保持功能性。透過遵循這些模式並考慮跨瀏覽器相容性，您可以為使用者創建一致且有吸引力的滾動體驗。
以上是使用 CSS 建立自訂捲軸：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
