如何自定義CSS滾動條的樣式？

来源:https://www.cnblogs.com/qcloud1001/archive/2018/11/26/10019441.html
-Advertisement-
Play Games

歡迎大家前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~ 本文由前端林子發表 本文會介紹CSS滾動條選擇器，併在demo中展示如何在Webkit內核瀏覽器和IE瀏覽器中，自定義一個橫向以及一個縱向的滾動條。 0.需求 有的時候我們不想使用瀏覽器預設的滾動條樣式，因為不夠定製化和美觀。那麼如何自定義 ...


歡迎大家前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~

本文由前端林子發表

本文會介紹CSS滾動條選擇器，併在demo中展示如何在Webkit內核瀏覽器和IE瀏覽器中，自定義一個橫向以及一個縱向的滾動條。

0.需求

有的時候我們不想使用瀏覽器預設的滾動條樣式，因為不夠定製化和美觀。那麼如何自定義滾動條的樣式呢？下麵一起來看看吧。

1 基礎知識

1.1 Webkit內核的css滾動條選擇器

::-webkit-scrollbar CSS偽類選擇器影響了一個元素的滾動條的樣式

屬性：

::-webkit-scrollbar — 整個滾動條

::-webkit-scrollbar-track — 滾動條軌道

::-webkit-scrollbar-thumb — 滾動條上的滾動滑塊

::-webkit-scrollbar-button — 滾動條上的按鈕 (上下箭頭)

::-webkit-scrollbar-track-piece — 滾動條沒有滑塊的軌道部分

::-webkit-scrollbar-corner — 邊角，即當同時有垂直滾動條和水平滾動條時交匯的部分

::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕)

註意：

(1)瀏覽器的支持情況：

::-webkit-scrollbar 僅僅在支持Webkit的瀏覽器 (Chrome, Safari)可以使用。

(2)可設置豎直/水平方向的滾動條

可以設置水平方向的滾動條(:horizontal)，不加預設是豎直方向(:vertical)。

(3)滾動條上的按鈕（:decrement、:increment）

可以設置圖片，這點會在下麵demo中展示。

1.2 IE自定義滾動條樣式

可自定義的樣式比較少，只能控制滾動條各個部分顯示的顏色，定製性較低。這裡我只列舉了部分樣式，諸如scrollbar-3dlight-color、scrollbar-highlight-color等樣式試了下沒有效果，這裡不再列出：

scrollbar-arrow-color — 滾動條三角箭頭的顏色 scrollbar-face-color — 滾動條上滾動滑塊顏色

scrollbar-track-color— 滾動條軌道、按鈕背景的顏色 scrollbar-shadow-color— 滾動框上滑塊邊框的顏色

2.demo快速上手

2.1 Webkit內核的瀏覽器自定義滾動條樣式 (chrome, safari)

如果覺得上述說明有些抽象，可以直接在瀏覽器中打開demo，結合demo中的註釋來理解各個屬性的意義。圖中我對其中的一些屬性做了標註，滾動條外層軌道屬性並未在圖中標註，可打開chrome瀏覽器控制台查看屬性：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>scrollbar的demo--lynnshen</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .scolltable {
      width: 500px;
      height: 300px;
      border: 1px solid black;
      
      /*實現水平垂直居中*/
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -250px;
      margin-top: -150px;

      overflow: scroll;
    }

    .content {
      /*要設的比.scolltable更寬一些*/
      width: 600px;
    }

    /*整個滾動條*/

    ::-webkit-scrollbar {
      width: 24px;
      background-color: transparent;
    }

    /*水平的整個滾動條*/

    ::-webkit-scrollbar:horizontal {
      height: 24px;
      background-color: transparent;
    }

    /*滾動條軌道*/

    ::-webkit-scrollbar-track {
      background-color: #f6f8fc;
      border-right: 1px solid #f1f5fa;
      border: 1px solid #f1f5fa;
      ;
    }

    /*豎直的滑塊*/

    ::-webkit-scrollbar-thumb {
      background-color: rgba(220, 228, 243, 1);
      border-radius: 0px;
      border-top: 1px solid #edf2f9;
      border-bottom: 1px solid #edf2f9;
      border-left: 1px solid #f1f5fa;
    }

    /*水平的滑塊*/

    ::-webkit-scrollbar-thumb:horizontal {
      /* background-color: rgba(220, 228, 243, 1); */
      border-radius: 0px;
      border-top: 1px solid #edf2f9;
      /* border-right: 1px solid #f1f5fa;
      border-left: 1px solid #f1f5fa; */
    }

    /*滾動條上的按鈕--豎直滾動條向上*/

    ::-webkit-scrollbar-button:decrement {
      border-bottom: 1px solid #edf2f9;
      height: 26px;
      background: url("./images/scroll_up.png") 7px 9px no-repeat;
      border-right: 1px solid #f1f5fa;
      border-left: 1px solid #f1f5fa;
    }

    /*滾動條上的按鈕--豎直滾動條向下*/

    ::-webkit-scrollbar-button:increment {
      border-top: 1px solid #edf2f9;
      height: 26px;
      background: url("./images/scroll_down.png") 7px 10px no-repeat;
      border-right: 1px solid #f1f5fa;
      border-left: 1px solid #f1f5fa;
      border-bottom: 1px solid #f1f5fa;
    }

    /*滾動條上的按鈕--水平滾動條向左*/

    ::-webkit-scrollbar-button:horizontal:decrement {
      border-top: 1px solid #edf2f9;
      width: 26px;
      background: url("./images/scroll_left.png") 9px 7px no-repeat;
      border-top: 1px solid #f1f5fa;
      border-bottom: 1px solid #f1f5fa;
      border-right:1px solid #f1f5fa;
    }

    /*滾動條上的按鈕--水平滾動條向右*/

    ::-webkit-scrollbar-button:horizontal:increment {
      border-top: 1px solid #edf2f9;
      width: 25px;
      background: url("./images/scroll_right.png") 10px 7px no-repeat;
      border-left:1px solid #f1f5fa;
    }
    
    /*邊角*/
    ::-webkit-scrollbar-corner{
      border:1px solid #dce4f3;
    }
  </style>
  
</head>

<body>
  <div class="scolltable">
    <div class="content">
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
    </div>
  </div>
</body>

</html>

實現效果：

imgWebKit內核的瀏覽器

說明：

(1)滾動條兩端的按鈕使用的圖片，四個角分別使用了四張圖片;

(2).scolltable實現了水平垂直居中的效果，具體方法是：使用絕對對位，將元素的定點定位到body的中心。然後使用負margin（即元素寬高的一半）將其拉回到body的中心。

2.2 IE自定義滾動條樣式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>scrollbar for IE--lynnshen</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .scolltable {
      width: 500px;
      height: 300px;
      border: 1px solid black;
      
      /*實現水平垂直居中*/
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -250px;
      margin-top: -150px;

      overflow: scroll;
      
      scrollbar-face-color:greenyellow;
      scrollbar-arrow-color:goldenrod;
      scrollbar-shadow-color:red;
      scrollbar-track-color:pink;
    }

    .content {
      /*要設的比.scolltable更寬一些*/
      width: 600px;
    }
    
  </style>
  
</head>

<body>
  <div class="scolltable">
    <div class="content">
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
    </div>
  </div>
</body>

</html>

實現效果：

imgIE

3.小結

本文主要是想記錄下在Webkit內核的瀏覽器和IE中，如何自定義滾動條的樣式，並分別提供了兩個demo。如有問題，歡迎指正。

此文已由作者授權騰訊雲+社區發佈，更多原文請點擊

搜索關註公眾號「雲加社區」，第一時間獲取技術乾貨，關註後回覆1024 送你一份技術課程大禮包！


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 03-箭頭函數
    箭頭函數 基本語法： ES6允許使用“箭頭”（=>）定義函數 如果箭頭函數不需要參數或需要多個參數，就使用一個圓括弧代表參數部分。 使用箭頭函數註意點： 箭頭函數有幾個使用註意點。 （1）函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。 我們發現，列印的結果為 此時this指向 ...
  • 頁面中多個script塊之間方法與變數共用問題
    JS是按照代碼塊來進行編譯和執行的，代碼塊間相互獨立，但變數和方法共用，按順序執行。 如： ...
  • 如何用ABP框架快速完成項目 - 自動化測試 - 前端angular e2e protractor
    1. 自動化測試比人工測試快很多. 特別是在回歸測試中. 2. 實踐證明, 雖然投入了時間在寫自動化測試代碼上, 但是在回歸測試中節省了大量的時間，同時及時發現bug輓救回來時間收益大大超過了早期寫自動化測試代碼的投入. 3. 特別是要測試瀏覽器相容性的時候，只寫一遍自動化測試代碼，就能自... ...
  • 學習web前端應該具備的一些技能
    目前，web前端企業已經成為市場爭搶的香餑餑，據招聘門戶網站前程無憂和智聯招聘數據顯示，每個月企業在51job上公佈的職位量在1.3萬左右，在智聯招聘上公佈的職位量是2.4萬左右，平均月薪12800左右。 這麼高端待遇好的職位，你想知道你適合做麽？ 我還是要推薦下我自己創建的web前端資料分享群60 ...
  • css3圖形繪製
    以下幾個例子主要是運用了css3中border、bordr-radius、transform、偽元素等屬性來完成的，我們先瞭解下它們的基本原理。 border：簡單的來說border語法主要包含（border-width、border-style、border-color）三個屬性。 „ borde ...
  • toastr操作完成提示框
    toastr.js組件 關於信息提示框，項目中使用的是toastr.js這個組件，這個組件最大的好處就是非同步、無阻塞，提示後可設置消失時間，並且可以將消息提示放到界面的各個地方。 官方文檔以及源碼 源碼網站：http://codeseven.github.io/toastr/ api：http:// ...
  • nodeJS搭一個簡單的(代理)web伺服器
    前端獲取數據時經常遇見跨域問題，以前一直用nginx做反向代理。最近在用vuejs，發現webpack-dev-server的代理簡單好用。於是仿照寫了一個簡單的web伺服器，用於非webpack的項目。 ...
  • 有效解決ajax傳中文時，亂碼的情況，php處理接收到的值
    在抽獎環節時，需把獲獎名單通過ajax的post方式傳輸給php後臺進行儲存，但是php接收到的值確是亂碼。在百度之後並沒有找到合適的解決方法。 則使用js的encodeURI函數可以有效解決，但不知為何需使用兩次。 此時傳輸的值獲取到的為： 則PHP使用urldecode函數處理獲取到的值。 則有 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類