現(xiàn)代 Web 瀏覽器可讓開發(fā)人員使用 CSS 自訂捲軸的外觀，從而在保持功能的同時(shí)增強(qiáng) Web 應(yīng)用程式的視覺吸引力。本指南探討如何實(shí)作具有跨瀏覽器相容性的自訂捲軸。

基本設(shè)定

首先，讓我們建立一個(gè)包含自訂捲軸的容器：

<div class="scrollbar-container">
  <h3>Visible custom scrollbar</h3>
  <p>
    <!-- Content that creates scrollable overflow -->
  </p>
</div>

容器樣式

可捲動(dòng)容器需要特定的尺寸和溢出屬性：

.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 */
}

跨瀏覽器實(shí)現(xiàn)

WebKit 瀏覽器（Chrome、Safari、Edge）

對(duì)於基於 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 */
  }  
}

設(shè)計(jì)考慮因素

實(shí)作包括幾個(gè)深思熟慮的設(shè)計(jì)選擇：

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

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

CSS 變數(shù)

此範(fàn)例使用 CSS 變數(shù)來實(shí)現(xiàn)一致的主題：

: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）：全面支援詳細(xì)客製化
• Firefox：透過捲軸寬度和捲軸顏色簡(jiǎn)化自訂
• Internet Explorer：不支援自訂捲軸
• Legacy Edge：有限支援

最佳實(shí)踐

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

最終結(jié)果

結(jié)論

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

以上是使用 CSS 建立自訂捲軸：綜合指南的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！