css 自定義滾動條樣式

我遇到的場景：

對於iframe視窗，自帶滾動條是整個視窗的大小。有時需要頂部或底部固定，則滾動條不應該觸碰到頂部或底部。

那麼首先開啟iframe時應該去掉滾動條 scrolling="no"，然後在需要滾動的區域自定義滾動條。

"

0" scrolling="
no" src="
index.html
" >

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>滾動
title
>
<
style
>
.scroll_contain
.scroll_config::-webkit-scrollbar 
.scroll_config::-webkit-scrollbar-thumb 
.scroll_config::-webkit-scrollbar-track 
.scroll_config::-webkit-scrollbar-arrow 
style
>
head
>
<
body
>
<
div 
class
="scroll_contain scroll_config"
style
="height: 200px;width: 200px"
>
<
div>
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
div>
div>
body
>
html
>

轉 ： 

CSS自定義滾動條樣式

ie是最早提供滾動條的樣式支援，好多年了，但是其它瀏覽器一直沒有支援，ie獨孤求敗了。這些樣式規則很簡單 scrollbar arrow color color 三角箭頭的顏色 scrollbar face color color 立體滾動條的顏色 包括箭頭部分的背景色 scrollbar 3dli...

CSS 自定義滾動條樣式

css 自定義滾動條樣式 針對 webkit 核心的遊覽器，使用下列偽類改變滾動條預設樣式。webkit scrollbar 滾動條整體部分 webkit scrollbar thumb 滾動條內滑塊 上下或左後移動 webkit scrollbar track 滾動條軌道 webkit scrol...

css 自定義滾動條樣式

總是記不住這幾個修改滾動條的偽類，抄過來記錄一下 你可以使用以下偽元素選擇器去修改各式webkit瀏覽器的滾動條樣式 webkit scrollbar 整個滾動條.webkit scrollbar button 滾動條上的按鈕 上下箭頭 webkit scrollbar thumb 滾動條上的滾動滑...