【前端】webkit內核瀏覽器DIV滾動條樣式修改和設置

来源:http://www.cnblogs.com/dragonir/archive/2017/09/04/7473661.html
-Advertisement-
Play Games

webkit內核瀏覽器DIV滾動條樣式修改和設置 引言： 最近在做自己的小項目，為了設計出好看的頁面費勁了心思，大到頁面的整體佈局，小到DIV的滾動條都不放過，以下是我通過查閱資料總結的webkit內核瀏覽器滾動條樣式的修改方法。 原理： webkit瀏覽器css設置滾動條主要有下麵7個屬性 1. ...


webkit內核瀏覽器DIV滾動條樣式修改和設置

引言：

　　最近在做自己的小項目，為了設計出好看的頁面費勁了心思，大到頁面的整體佈局，小到DIV的滾動條都不放過，以下是我通過查閱資料總結的webkit內核瀏覽器滾動條樣式的修改方法。

 

原理：

　　webkit瀏覽器css設置滾動條主要有下麵7個屬性

1. ::-webkit-scrollbar 滾動條整體部分，可以設置寬度啥的

2. ::-webkit-scrollbar-button 滾動條兩端的按鈕

3. ::-webkit-scrollbar-track  外層軌道

4. ::-webkit-scrollbar-track-piece  內層滾動槽

5. ::-webkit-scrollbar-thumb 滾動的滑塊

6. ::-webkit-scrollbar-corner 邊角

7 .::-webkit-resizer 定義右下角拖動塊的樣式

　　具體所指如圖例

 

　　下麵是滾動條的主要幾個設置屬性

:horizontal 水平方向的滾動條

:vertical 垂直 方向的滾動條

:decrement 應用於按鈕和內層軌道(track piece)。它用來指示按鈕或者內層軌道是否會減小視窗的位置(比如，垂直滾動條的上面，水平滾動條的左邊。)

:increment decrement類似，用來指示按鈕或內層軌道是否會增大視窗的位置(比如，垂直滾動條的下麵和水平滾動條的右邊。)

:start 偽類也應用於按鈕和滑塊。它用來定義對象是否放到滑塊的前面。

:end 類似於start偽類，標識對象是否放到滑塊的後面。

:double-button  該偽類以用於按鈕和內層軌道。用於判斷一個按鈕是不是放在滾動條同一端的一對按鈕中的一個。對於內層軌道來說，它表示內層軌道是否緊靠一對按鈕。

:single-button 類似於double-button偽類。對按鈕來說，它用於判斷一個按鈕是否自己獨立的在滾動條的一段。對內層軌道來說，它表示內層軌道是否緊靠一個single-button。

:no-button 用於內層軌道，表示內層軌道是否要滾動到滾動條的終端，比如，滾動條兩端沒有按鈕的時候。

:corner-present  用於所有滾動條軌道，指示滾動條圓角是否顯示。

:window-inactive 用於所有的滾動條軌道，指示應用滾動條的某個頁面容器(元素)是否當前被激活。(在webkit最近的版本中，該偽類也可以用於::selection偽元素。webkit團隊有計劃擴展它並推動成為一個標準的偽類)

　　　

　　寫個實例demo，CSS很簡單。

/* 設置滾動條的樣式 */

::-webkit-scrollbar {

   width: 12px;

}

/* 滾動槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

/* 滾動條滑塊 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255,0,0,0.4);
}

　　

IE滾動條樣式設置

　　IE下麵就比較簡單那了，自定義的項目比較少，全是顏色。

1. scrollbar-arrow-color: color; /*三角箭頭的顏色*/

2. scrollbar-face-color: color; /*立體滾動條的顏色（包括箭頭部分的背景色）*/

3. scrollbar-3dlight-color: color; /*立體滾動條亮邊的顏色*/

4. scrollbar-highlight-color: color; /*滾動條的高亮顏色（左陰影？）*/

5. scrollbar-shadow-color: color; /*立體滾動條陰影的顏色*/

6. scrollbar-darkshadow-color: color; /*立體滾動條外陰影的顏色*/

7. scrollbar-track-color: color; /*立體滾動條背景顏色*/

8. scrollbar-base-color:color; /*滾動條的基色*/

 

  

實踐

實現效果展示：

　　以下是我在chrome上實現的幾個滾動條效果

 

HTML:

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>webkit滾動條樣式</title>
    <link rel="stylesheet" href="css/style.css">  
</head>

<body>
    <div id="wrapper">
        <div class="scrollbar" id="style-default">
          <div class="force-overflow"></div>
        </div>
        <div class="scrollbar" id="style-1">
          <div class="force-overflow"></div>
        </div>
        <div class="scrollbar" id="style-2">
          <div class="force-overflow"></div>
        </div>
        <div class="scrollbar" id="style-3">
          <div class="force-overflow"></div>
        </div>
        <div class="scrollbar" id="style-4">
          <div class="force-overflow"></div>
        </div>
        <div class="scrollbar" id="style-5">
          <div class="force-overflow"></div>
        </div>
        <div class="scrollbar" id="style-6">
          <div class="force-overflow"></div>
        </div>
        <div class="scrollbar" id="style-7">
          <div class="force-overflow"></div>
        </div>
        <div class="scrollbar" id="style-8">
          <div class="force-overflow"></div>
        </div>
        <div class="scrollbar" id="style-9">
          <div class="force-overflow"></div>
        </div>
        <div class="scrollbar" id="style-10">
          <div class="force-overflow"></div>
        </div>
        <div class="scrollbar" id="style-11">
          <div class="force-overflow"></div>
        </div>
        <div class="scrollbar" id="style-13">
          <div class="force-overflow"></div>
        </div>
        <div class="scrollbar" id="style-14">
          <div class="force-overflow"></div>
        </div>
        <div class="scrollbar" id="style-15">
          <div class="force-overflow"></div>
        </div>
    </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src="js/index.js"></script>
</body>
</html>

　　

CSS：

body{
	background-color: #2f2f2f;
}
header
{
	font-family: 'Lobster', cursive;
	text-align: center;
	font-size: 25px;	
}

#info
{
	font-size: 18px;
	color: #555;
	text-align: center;
	margin-bottom: 25px;
}

a{
	color: #074E8C;
}

.scrollbar
{
	margin-left: 20px;
	float: left;
	height: 300px;
	width: 100px;
	background: #fff;
	overflow-y: scroll;
	margin-bottom: 30px;
}

.force-overflow
{
	min-height: 450px;
}

#wrapper
{
	text-align: center;
	width: 80%;
	margin: 20px auto;
}

/*
 *  STYLE 1
 */

#style-1::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
	border-radius: 20px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

/*
 *  STYLE 2
 */

#style-2::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #D62929;
}

/*
 *  STYLE 3
 */

#style-3::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb
{
	background-color: #000000;
}

/*
 *  STYLE 4
 */

#style-4::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar-thumb
{
	background-color: #000000;
	border: 2px solid #555555;
}


/*
 *  STYLE 5
 */

#style-5::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar-thumb
{
	background-color: #0ae;
	
	background-image: -webkit-gradient(linear, 0 0, 0 100%,
	                   color-stop(.5, rgba(255, 255, 255, .2)),
					   color-stop(.5, transparent), to(transparent));
}


/*
 *  STYLE 6
 */

#style-6::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar-thumb
{
	background-color: #F90;	
	background-image: -webkit-linear-gradient(45deg,
	                                          rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}


/*
 *  STYLE 7
 */

#style-7::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-7::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-7::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-image: -webkit-gradient(linear,
									   left bottom,
									   left top,
									   color-stop(0.44, rgb(122,153,217)),
									   color-stop(0.72, rgb(73,125,189)),
									   color-stop(0.86, rgb(28,58,148)));
}

/*
 *  STYLE 8
 */

#style-8::-webkit-scrollbar-track
{
	border: 1px solid black;
	background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar-thumb
{
	background-color: #000000;	
}

/*
 *  STYLE 9
 */

#style-9::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar-thumb
{
	background-color: #F90;	
	background-image: -webkit-linear-gradient(90deg,
	                                          rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}


/*
 *  STYLE 10
 */

#style-10::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-10::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-10::-webkit-scrollbar-thumb
{
	background-color: #AAA;
	border-radius: 10px;
	background-image: -webkit-linear-gradient(90deg,
	                                          rgba(0, 0, 0, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(0, 0, 0, .2) 50%,
											  rgba(0, 0, 0, .2) 75%,
											  transparent 75%,
											  transparent)
}


/*
 *  STYLE 11
 */

#style-11::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-11::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-11::-webkit-scrollbar-thumb
{
	background-color: #3366FF;
	border-radius: 10px;
	background-image: -webkit-linear-gradient(0deg,
	                                          rgba(255, 255, 255, 0.5) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, 0.5) 50%,
											  rgba(255, 255, 255, 0.5) 75%,
											  transparent 75%,
											  transparent)
}

/*
 *  STYLE 12
 */

#style-12::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
	border-radius: 10px;
	background-color: #444444;
}

#style-12::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#style-12::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #D62929;
	background-image: -webkit-linear-gradient(90deg,
											  transparent,
											  rgba(0, 0, 0, 0.4) 50%,
											  transparent,
											  transparent)
}

/*
 *  STYLE 13
 */

#style-13::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
	border-radius: 10px;
	background-color: #CCCCCC;
}

#style-13::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#style-13::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #D62929;
	background-image: -webkit-linear-gradient(90deg,
											  transparent,
											  rgba(0, 0, 0, 0.4) 50%,
											  transparent,
											  transparent)
}

/*
 *  STYLE 14
 */

#style-14::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
	background-color: #CCCCCC;
}

#style-14::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-14::-webkit-scrollbar-thumb
{
	background-color: #FFF;
	background-image: -webkit-linear-gradient(90deg,
	                                          rgba(0, 0, 0, 1) 0%,
											  rgba(0, 0, 0, 1) 25%,
											  transparent 100%,
											  rgba(0, 0, 0, 1) 75%,
											  transparent)
}

/*
 *  STYLE 15
 */

#style-15::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-15::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-15::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #FFF;
	background-image: -webkit-gradient(linear,
									   40% 0%,
									   75% 84%,
									   from(#4D9C41),
									   to(#19911D),
									   color-stop(.6,#54DE5D))
}

/*
 *  STYLE 16
 */

#style-16::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-16::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-16::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #FFF;
	background-image: -webkit-linear-gradient(top,
											  #e4f5fc 0%,
											  #bfe8f9 50%,
											  #9fd8ef 51%,
											  #2ab0ed 100%);
}

 

JS：

$(document).ready(function () {
    if (!$.browser.webkit) {
        $('.wrapper').html('<p>Sorry! Non webkit users. :(</p>');
    }
});

 

 參考資料：

歡迎點擊查看原文: CSS設置滾動條樣式


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

-Advertisement-
Play Games
更多相關文章
  • 有關兩個jar包中包含完全相同的包名和類名的載入問題
    首先從表現層介紹，後續後深入原理。 1，先簡單介紹maven如何生成jar文件方便測試 2.自定義兩個jar包，其中包含相同包名和類名 與export的導入順序有關。只會載入第一個，並且運行正常。 3.自定義jar和jdk包， 其中包含相同的包名和類名 與export的導入順序有關。同樣是只會載入第 ...
  • 2017-5-3/高性能網站架構
    1. 講講你認為的高性能網站架構，或者說現在流行的網站架構。 2. 什麼是一主多從？ 3. 什麼是負載均衡？ ...
  • 設計模式之狀態模式
    定義（百度百科）： 當一個對象的內在狀態改變時允許改變其行為，這個對象看起來像是改變了其類。 UML類圖： 具體代碼： 模塊說明： Context:它定義了客戶需要的介面並維護一個具體狀態角色(State)的實例，將與狀態相關的操作交給當前的ConcreteState對象來處理 State:定義一個 ...
  • 微服務從設計到部署（三）進程間通信
    在單體應用程式中，組件可通過語言級方法或者函數相互調用。相比之下，基於微服務的應用程式是一個運行在多台機器上的分散式系統。通常，每個服務實例是一個進程。因此，服務必須使用進程間通信（IPC）機制進行交互。稍後我們將瞭解到多種 IPC 技術，但在此之前，我們先來探討一下涉及到的各種設計問題。 ...
  • 一個簡單的註冊頁面,基於JS
    用戶註冊 用戶姓名 : ... ...
  • JavaScript 30 - 2 學習筆記
    學習JavaScirpt30的筆記！ 有意思！ 2 > CSS clock 效果是這樣的.... 這是改良過後的 版本.... 話不多說，直接來看代碼。 首先是html部分 最外層的 clock 來作為底部的圓環。 變化都是在 clock-face 裡面的。 之後就是三個 div指針啦。 下麵是CS ...
  • ES6，Array.of的用法
    ES6為Array增加了of函數用已一中明確的含義將一個或多個值轉換成數組。 因為，用new Array()構造數組的時候，是有二意性的。 構造時，傳一個參數，表示生成多大的數組。 構造時，傳多個參數，每個參數都是數組的一個元素。 結果： ES6增加的Array.of()方法，只有一個含義，of的參 ...
  • javascript基礎進階——執行環境及作用域鏈
    概念 執行環境 執行環境定義了變數或函數有權訪問的其他函數，決定了他們各自的行為。每個執行環境都有一個與之關聯的變數對象。 變數對象 環境中定義的所有變數和函數都保存在這個對象中。 全局執行環境 全局執行環境是最外圍的一個執行環境。在web瀏覽器中，全局執行環境被認為是Window對象，因此所有全局 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類