CSS滾動條選擇器 實現個性化滾動條

參考**如下：

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>個性化滾動條
title
>
6<
style
>
7div
15/*
整個滾動條的樣式
*/16
div::-webkit-scrollbar
20/*
滾動條軌道樣式
*/21
div::-webkit-scrollbar-track
25/*
滾動條滑塊樣式
*/26
div::-webkit-scrollbar-thumb
33/*
滾動條上的按鈕--垂直滾動條向上按鈕
*/34
div::-webkit-scrollbar-button:decrement 
39/*
滾動條上的按鈕--垂直滾動條向下按鈕
*/40
div::-webkit-scrollbar-button:increment 
45style
>
46head
>
47<
body
>
48<
div>
49<
h1>css滾動條選擇器
h1>
50<
h3>可以使用以下偽元素選擇器去修改各式webkit瀏覽器的滾動條樣式
h3>
51<
ul>
52<
li>::-webkit-scrollbar — 整個滾動條
li>
53<
li>::-webkit-scrollbar-button — 滾動條上的按鈕 (上下箭頭)
li>
54<
li>::-webkit-scrollbar-thumb — 滾動條上的滾動滑塊
li>
55<
li>::-webkit-scrollbar-track — 滾動條軌道
li>
56<
li>::-webkit-scrollbar-track-piece — 滾動條沒有滑塊的軌道部分
li>
57<
li>::-webkit-scrollbar-corner — 當同時有垂直滾動條和水平滾動條時交匯的部分
li>
58<
li>::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕)
li>
59ul
>
60<
hr>
61<
h1>語法
h1>
62<
p>::-webkit-scrollbar 
p>
63<
h1>注意
h1>
64<
p>該特性是非標準的，請盡量不要在生產環境中使用它！
p>
65div
>
66body
>
67html
>

（down.png）

效果圖展示：

css滾動條設定（選擇器）

webkit scrollbar 整個滾動條.webkit scrollbar button 滾動條上的按鈕 上下箭頭 webkit scrollbar thumb 滾動條上的滾動滑塊.webkit scrollbar track 滾動條軌道.webkit scrollbar track piece...

css實現滾動並隱藏滾動條

在做網頁前端頁面時，有些場景需要實現滾動的效果，但是由於滾動條的出現，造成頁面效果有些突兀，不美觀。這時候就需要乙個既能滾動並能隱藏滾動條的效果了。1 簡單來說 需要3個盒子 2 最外層的盒子與最裡面的盒子要設定寬高 3 最外層的盒子需要設定相對定位 relative 溢位隱藏overflow hi...

使用CSS實現無滾動條滾動

我們都知道，擼頁面的時候當我們的內容超出了我們的div，往往會出現滾動條，影響美觀。接下來小萌介紹幾種簡單的方法，但是也不是完美的解決問題了，各求所需吧 在webkit核心的瀏覽器裡可以定義滾動條樣式。在css初始處定義 1 webkit scrollbar 不過目前本方法只在webkit核心瀏覽器...