使用 CSS 建立自訂捲軸：綜合指南

現代 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 瀏覽器（Chrome、Safari、Edge）

對於基於 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 */
  }  
}

設計考慮因素

實作包括幾個深思熟慮的設計選擇：

1. 邊框半徑：100vw 值為軌道和拇指創建完美的圓角。
2. 最小寬度：4px 寬度使捲軸可見但不顯眼。
3. 配色方案：帶有紫紅色/紫紅色拇指的白色軌道可提供良好的對比度，同時保持視覺吸引力。
4. 一致的版式：設計使用 Rubik 字體系列以提高可讀性：

@import url(https://fonts.googleapis.com/css2?family=Rubik);

CSS 變數

此範例使用 CSS 變數來實現一致的主題：

:root {
  --primary-text-color: #222;
  --secondary-text-color: #fff;
  --primary-bg-color: #222;
  --secondary-bg-color: #fff;
  --tertiary-bg-color: #ddd;
}

瀏覽器相容性

• WebKit 瀏覽器（Chrome、Safari、Edge）：全面支援詳細客製化
• Firefox：透過捲軸寬度和捲軸顏色簡化自訂
• Internet Explorer：不支援自訂捲軸
• Legacy Edge：有限支援

最佳實踐

1. 保持可用性：保持捲軸可見且有效
2. 一致的樣式：將捲軸顏色與您網站的主題相符
3. 測試：驗證不同瀏覽器的外觀
4. 響應式設計：考慮捲軸大小在不同視窗大小下的顯示方式

最終結果

結論

自訂捲軸可以增強 Web 應用程式的視覺吸引力，同時保持功能性。透過遵循這些模式並考慮跨瀏覽器相容性，您可以為使用者創建一致且有吸引力的滾動體驗。

以上是使用 CSS 建立自訂捲軸：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！