元素圓角與內部滾動條的矛盾

方案實現

自定義滾動條擴充套件

遺留問題

我們在寫 web 頁面的時候，除了頁面原生的滾動條，比如 html 的滾動條，body 的滾動條之外，還有一種比較常見的滾動條，那就是元素內部滾動條，我們在利用元素內部滾動條的時候會遇到什麼問題呢，我們如何自定義滾動條。

比如迅雷客戶端，除了最右邊的滾動條是頁面滾動條，其他兩個都是元素內部滾動條。

在面板區域，我們的內部滾動條，因為外部元素的圓角給裁剪掉了，這在視覺上是不行的，那我們想辦法解決。

給這個元素新增乙個margin讓元素與底部有一定距離，這個距離我們認為是圓角的大小，即能解決問題，但是這也會造成元素底部一直有空隙，而不是乙個完整的可滾動區域，視覺體驗上還是欠佳。

想到原生滾動條上下有兩個箭頭，那我們是不是可以把這個箭頭改造一下，讓它的高度等於圓角的大小，同時透明不可見呢，這樣我們就實現了滾動條距離底部有一定距離，不會被外部圓角所裁剪，也能保證完整的滾動區域，保證使用者體驗。

這是 chrome 預設的滾動條樣式，當然我們還應該知道，滾動條應該四個箭頭，上面兩個，下面兩個，都是用來自增或自減的。

自定義滾動條，我們平時用的多的可能是自定義滾動條的軌道，顏色，大小等，但上下箭頭一般是隱藏的，所以我們需要去查一下瀏覽器對於滾動條有哪些css選擇器

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

::-webkit-scrollbar-button — 滾動條上的按鈕 (上下箭頭).
::-webkit-scrollbar-thumb — 滾動條上的滾動滑塊.
::-webkit-scrollbar-track — 滾動條軌道.
::-webkit-scrollbar-track-piece — 滾動條沒有滑塊的軌道部分.
::-webkit-scrollbar-corner — 當同時有垂直滾動條和水平滾動條時交匯的部分.
::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕).

// 滾動條所有箭頭按鈕

::-webkit-scrollbar-button
// 垂直方向的滾動條箭頭::
-webkit-scrollbar-button
:vertical 
// 垂直滾動條上方箭頭::
-webkit-scrollbar-button
:vertical
:start
// 垂直滾動條上方漸箭頭::
-webkit-scrollbar-button
:vertical
:start
:increment
// 垂直滾動條上方漸減箭頭::
-webkit-scrollbar-button
:vertical
:start
:decrement
// 垂直滾動條下方箭頭::
-webkit-scrollbar-button
:vertical
:end
// 垂直滾動條下方漸增箭頭::
-webkit-scrollbar-button
:vertical
:end
:increment
// 垂直滾動條下方漸減箭頭::
-webkit-scrollbar-button
:vertical
:end
:decrement

// 隱藏所有箭頭按鈕

::-webkit-scrollbar-button
// 垂直滾動條下方漸增或漸減箭頭顯示其一
::-webkit-scrollbar-button:vertical:end:increment

>

>
>
自定義滾動條title
>
head
>
>

滾動條與元素尺寸

js中有兩套方法可以檢視當前滾動條的滾動距離。第一套是這樣的 這個方法可以檢視滾動條的橫軸和縱軸的滾動距離，但是很遺憾的是ie8以及以下的版本不相容。因此針對於ie，我們就需要有第二套方法 document.body.scrollleft doucment.body.scrolltop docume...

判斷元素是否有滾動條

因為出現滾動條便意味著元素空間將大於其內容顯示區域，根據這個現象便可以得到判斷是否出現滾動條的規則.el.scrollheight el.clientheightscrollheight 指的是元素的內容高度，即如果有滾動條，它的值會等於內容實際的高度加padding值 並不包含border和mar...

使用CSS隱藏元素滾動條

如何隱藏滾動條，同時仍然可以在任何元素上滾動？首先，如果需要隱藏滾動條並在內容溢位時顯示滾動條，只需要設定overflow auto樣式即可。想要完全隱藏滾動條只需設定overflow hidden即可，但是這樣一來將導致元素內容不可滾動。時至今日，還沒有任何一條css規則可以使元素可以隱藏滾動條的...