CSS自定義滾動條

2021-09-24 02:57:33 字數 1381 閱讀 9589

乙個類名為parent的容器包裹了一些lorem。

lorem ipsum dolor sit amet consectetur adipisicing elit. iusto, delectus


libero cupiditate sapiente excepturi, ea hic, exercitationem quisquam ad


dolor asperiores quibusdam ut natus mollitia velit voluptate. alias,


corporis numquam!lorem ipsum dolor sit amet consectetur adipisicing elit.


iusto, delectus libero cupiditate sapiente excepturi, ea hic,


exercitationem quisquam ad dolor asperiores quibusdam ut natus mollitia


velit voluptate. alias, corporis numquam!
在容器元素中一定要有給定的高度和overflow屬性：

.parent
偽類-webkit-scrollbar表示webkit中滾動條的軌道，將其寬度定義為0，背景定義為transparent即可隱藏滾動條。

::-webkit-scrollbar
-webkit-scrollbar用於改變滾動條軌道樣式，這裡修改了寬度和顏色。

-webkit-scrollbar-thumb用於改變滾動條按鈕樣式，這裡修改了background-color，border-radius，opacity和box-shadow。

-webkit-scrollbar-thumb:hover: 滾動條按鈕拖動，拖動對應用hover事件，這裡修改了顏色。

::-webkit-scrollbar 


::-webkit-scrollbar-thumb 


::-webkit-scrollbar-thumb:hover
新版的mozilla中規定了 scrollbar-color和scrollbar-width屬性，直接在容器中使用。

scrollbar-color有auto，dark，light或自定義選項。

scrollbar-width有auto，thin，none選項。

.parent
參考：

scrollbar-width：

scrollbar-color：

scrollbar：

css自定義滾動條

1 在谷歌瀏覽器和safari中可直接設定，如果想單獨對某個盒子新增，直接在偽類前面加上選擇器即可 滾動條的軌道 滾動條的滑塊按鈕 webkit scrollbar track,webkit scrollbar thumb 滾動條的上下兩端的按鈕 webkit scrollbar button we...

CSS 自定義滾動條

瀏覽器允許自定義滾動條，ie也可以改變預設的樣色，不過效果不明顯。常見谷歌瀏覽器滾動條修改 webkit scrollbar webkit scrollbar thumb webkit scrollbar track ie自定義滾動條顏色 webkit scrollbar 滾動條整體部分，可以設定寬...

css 自定義滾動條

我遇到的場景 對於iframe視窗，自帶滾動條是整個視窗的大小。有時需要頂部或底部固定，則滾動條不應該觸碰到頂部或底部。那麼首先開啟iframe時應該去掉滾動條 scrolling no 然後在需要滾動的區域自定義滾動條。iframe frameborder 0 scrolling no src i...