寫在前面
滾動條是個很常見的東東，不過某些瀏覽器自帶的滾動條確實不太好看啊，下面可以作為學習，**下自定義滾動條的實現，這樣你的滾動條就可以美美的啦。但是，也只能玩玩，因為只針對webkit核心的瀏覽器啊啊啊啊啊！
overflow介紹
定義：overflow 屬性指定當它溢位其塊級容器時,是否剪輯內容，渲染滾動條或顯示內容。
屬性值
overflow:visible //預設值。內容不會被修剪，超出內容會顯示在元素框之外
overflow:hidden //內容會被修剪。超出內容被隱藏
overflow:scroll //內容會被修剪，瀏覽器會顯示滾動條以便檢視其餘內容
overflow:auto //如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
overflow:inherit //規定從該父元素繼承overflow屬性的值
當overflow設為除預設值（visible）以外的值時，將會建立乙個會塊級式化上下文（清除浮動的一種方式），更多可檢視深入理解bfc和margin collapse
小tips
對於當行文字對超出部分的處理可使用一下屬性。（同時需設定元素的width值，還有overflow:hidden;及white-space:nowrap;)
text-overflow:clip //修剪文字。
text-overflow:ellipsis //顯示省略符號來代表被修剪的文字。
text-overflow:string //使用給定的字串來代表被修剪的文字。
-webkit-line-clamp，此處不細講。點選此處參考
水平及垂直滾動條
使用overflow-x和overflow-y可分別設定水平及垂直方向上的滾動條。
自定義滾動條實現
此部分針對webkit核心的瀏覽器，使用偽類來改變滾動條的預設樣式，詳情如下：
滾動條組成部分
1. ::-webkit-scrollbar 滾動條整體部分
2. ::-webkit-scrollbar-thumb 滾動條裡面的小方塊，能向上向下移動（或向左向右移動）
3. ::-webkit-scrollbar-track 滾動條的軌道（裡面裝有thumb）
4. ::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，由於通過點選微調小方塊的位置。
5. ::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分
6. ::-webkit-scrollbar-corner 邊角，即垂直滾動條和水平滾動條相交的地方
7. ::-webkit-resizer 兩個滾動條的交匯處上用於拖動調整元素大小的小控制項
下面來一組簡單自定義滾動條的實現：
這個屬性定義溢位元素內容區的內容會如何處理。如果值為 scroll，不論是否需要， 使用者**都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也 會出現滾動條。 這個屬性定義溢位元素內容區的內容會如何處理。如果值為
scroll，不論是否需要， 使用者**都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也 會出現滾動條。
.box8::-webkit-scrollbar
.box8::-webkit-scrollbar-track
.box8::-webkit-scrollbar-thumb
.box8::-webkit-scrollbar-button:start
.box8::-webkit-scrollbar-button:end
注意只在chrome下有效！！！！！！
原始碼位址
預覽位址
小結參考資料
CSS3自定義滾動條樣式
主要部分 自定義樣式 滾動條整體樣式 transcrided text webkit scrollbar 滾動條滑塊 transcrided text webkit scrollbar thumb 滾動條軌道 transcrided text webkit scrollbar track chrom...
CSS3自定義滾動條樣式以及隱藏滾動條
蒐集資料總結如下 當內容超出容器時，容器會出現滾動條，其自帶的滾動條有時無法滿足我們審美要求，那麼我們可以通過css偽類來實現對滾動條的自定義。首先我們要了解滾動條。滾動條從外觀來看是由兩部分組成 1，可以滑動的部分，我們叫它滑塊2，滾動條的軌道，即滑塊的軌道，一般來說滑塊的顏色比軌道的顏色深。滾動...
css3自定義滾動條
瀏覽器預設的滾動條樣式不是很美觀，在有些需求中，我們需要更改預設滾動條樣式。目前還無法做到相容所有瀏覽器的範圍內修改預設滾動條樣式，google ie可更改預設滾動條樣式，火狐暫不支援更改預設滾動條樣式。滾動條可修改以下樣式 修改部分 google對應偽類 滾動條寬高及背景 webkit scrol...