CSS 自訂瀏覽器捲軸樣式
4,314 0
今天訪問憧憬部落格時，發現他網站的瀏覽器預設側邊捲軸被修改成了自訂樣式。後來上網查詢了一下，得知該樣式可以通過 CSS 來設計。於是我自己搗鼓了一下，順便把 CSS 程式碼借了過來，本頁已經用上了，效果大家可以自己看看。
注意：
該樣式僅限於 Chromium 核心的瀏覽器，比如 Google 瀏覽器、QQ 瀏覽器、360 瀏覽器等。非 Chromium 核心的瀏覽器則不會顯示樣式，例如 Firefox 瀏覽器、Opera 瀏覽器等。
CSS 程式碼
屬性說明
::-webkit-scrollbar /* 滚动条整体部分 */
::-webkit-scrollbar-button /* 滚动条两端的按钮 */
::-webkit-scrollbar-track /* 外层轨道 */
::-webkit-scrollbar-track-piece /* 内层轨道滚动条中间部分 */
::-webkit-scrollbar-thumb /* 滚动条里面可以拖动的部分 */
::-webkit-scrollbar-corner /* 边角 */
::-webkit-resizer /* 定义右下角拖动块的样式 */
範例程式碼
以下是本頁使用的 CSS 樣式，大家可以根據需要自行修改
CSS CSS
/* 滚动条默认显示样式 */
::-webkit-scrollbar-thumb {
background-color: #03a9f4;
height: 50px;
outline-offset: -2px;
outline: 2px solid #cddc39;
-webkit-border-radius: 4px;
border: 2px solid #fff;
}
/* 鼠标悬停滚动条样式 */
::-webkit-scrollbar-thumb:hover {
background-color: #00bcd4;
height: 50px;
-webkit-border-radius: 4px;
}
/* 滚动条宽度与高度 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* 滚动框背景样式 */
::-webkit-scrollbar-track-piece {
background-color: #fff;
-webkit-border-radius: 0;
}
評論
(0)暫無評論，來說兩句吧