使用CSS美化Chrome下的滾動條樣式

2021-08-03 16:03:27 字數 952 閱讀 6635

瀏覽器原生的滾動條有時過多會影響介面美觀,ie下的滾動條更是如此,有時我們需要美化一下滾動條,可以使用瀏覽器原生的樣式,或者使用js外掛程式,這裡介紹如何修改chrome下的滾動條樣式。

主要借助偽元素實現:

class="container">

pellentesque habitant morbi tristique senectus...(很多文字)p>

div>

body>

.container

p ::-webkit-scrollbar

/*滑塊*/

::-webkit-scrollbar-thumb

::-webkit-scrollbar-thumb:hover

/*滑道*/

::-webkit-scrollbar-track

執行效果:

//上述**

.../*上下左右按鈕*/

::-webkit-scrollbar-button

::-webkit-scrollbar-button:vertical:start

::-webkit-scrollbar-button:vertical:end

::-webkit-scrollbar-button:horizontal:start

::-webkit-scrollbar-button:horizontal:end

執行效果:

以上**只在chrome下可行,其他瀏覽器相容性可參考

chrome下使用的let,const變數的誤區

學es6,總是習慣在控制項臺直接貼上 執行,用到let,const變數時在chrome總出錯,按提示在第一行加 use strict 還是不行!use strict function iterentries obj let myobj for let key of iterentries myobj...

CSS 網頁的樣式美化

內部樣式表 不用通過引入css檔案來設定樣式,直接在head的 style 雙標籤中設定。內聯樣式表 行內樣式 在html中,直接將樣式屬性寫在標籤上,優先順序高於其它所有方式設定的樣式,加了 important的除外。外部樣式表 通過引入外部css檔案設定樣式,引入方式有兩種,一種是通過link標...

使用chrome檢視頁面元素的css樣式

我們在寫頁面的時候,可能總是不知道怎麼回事,就發現某個元素出現了問題,但是不知道為什麼會這樣,這時候,就需要使用強大的chrome了!舉例說明 其中最上面的是行內樣式,往下有我們對其進行直接的樣式設定的 往下有從a元素繼承來的樣式,在往下會有從h1繼承來的樣式,一直繼承自html,這個繼承順序是按照...