純css3自定義滾動條

2021-08-18 13:58:59 字數 718 閱讀 2525

前言:找到乙個純css3寫的滾動條,以前總覺得,滾動條要用js外掛程式寫的,其實可以有更簡單的方法。

當內容超出容器時,容器會出現滾動條,其自帶的滾動條有時無法滿足我們審美要求,那麼我們可以通過css偽類來實現對滾動條的自定義。

首先我們要了解滾動條。滾動條從外觀來看是由兩部分組成:1,可以滑動的部分,我們叫它滑塊2,滾動條的軌道,即滑塊的軌道,一般來說滑塊的顏色比軌道的顏色深。

滾動條的css樣式主要有三部分組成:

1、::-webkit-scrollbar   定義了滾動條整體的樣式;

2、::-webkit-scrollbar-thumb  滑塊部分;

3、::-webkit-scrollbar-thumb  軌道部分;

下面以overflow-y:auto;為例(overflow-x:auto同)

顏色根據需要改吧

css3自定義滾動條

瀏覽器預設的滾動條樣式不是很美觀,在有些需求中,我們需要更改預設滾動條樣式。目前還無法做到相容所有瀏覽器的範圍內修改預設滾動條樣式,google ie可更改預設滾動條樣式,火狐暫不支援更改預設滾動條樣式。滾動條可修改以下樣式 修改部分 google對應偽類 滾動條寬高及背景 webkit scrol...

CSS3自定義滾動條樣式

主要部分 自定義樣式 滾動條整體樣式 transcrided text webkit scrollbar 滾動條滑塊 transcrided text webkit scrollbar thumb 滾動條軌道 transcrided text webkit scrollbar track chrom...

CSS3自定義滾動條樣式

寫在前面 滾動條是個很常見的東東,不過某些瀏覽器自帶的滾動條確實不太好看啊,下面可以作為學習,下自定義滾動條的實現,這樣你的滾動條就可以美美的啦。但是,也只能玩玩,因為只針對webkit核心的瀏覽器啊啊啊啊啊!overflow介紹 定義 overflow 屬性指定當它溢位其塊級容器時,是否剪輯內容,...