CSS中div滾動條樣式如何設置

蝸牛 互聯網技術資訊 2022-10-01 28 0

這篇文章主要介紹“CSS中div滾動條樣式如何設置”,在日常操作中,相信很多人在CSS中div滾動條樣式如何設置問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”CSS中div滾動條樣式如何設置”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!

自定義滾動條設計

曾經有一個自定義滾動條只是 webkit,所以 Firefox 和 IE 被淘汰了。我們有一個只在 Firefox 中有效的新語法,當它被完全支持時,它會讓我們的工作變得更容易。下面將介紹舊的 Webkit 語法,然后是新的語法。

舊語法

滾動條寬度

首先,我們需要定義滾動條的大小。這可以是垂直滾動條的寬度和水平滾動條的高度。

.section::-webkit-scrollbar?{??width:?10px;
}

使用該設置,我們可以設置滾動條本身的樣式。

滾動條軌道

這表示滾動條的底部。我們可以通過添加背景顏色、陰影、邊框半徑和邊框來設置它的樣式。

.section::-webkit-scrollbar-track?{??background-color:?darkgrey;
}

滾動條拇指

一旦我們準備好滾動條的底部,我們需要設置滾動條拇指的樣式。這很重要,因為用戶可能會拖動此拇指與滾動條進行交互。

.section::-webkit-scrollbar-thumb?{??box-shadow:?inset?0?0?6px?rgba(0,?0,?0,?0.3);
}

至此,我們已經介紹了在 CSS 中設置自定義滾動條樣式的舊方法。讓我們探索新的語法。

新語法

滾動條寬度

正如它所說,這定義了滾動條的寬度,我們最關心的值是auto和thin。不幸的是,我們不能像 webkit 語法那樣定義一個特定的數字。

.section?{??scrollbar-width:?thin;
}

滾動條顏色

使用此屬性,我們可以將滾動條軌道和拇指的顏色定義為對值。

.section?{??scrollbar-color:?#6969dd?#e0e0e0;??scrollbar-width:?thin;
}

就像這種新語法一樣簡單,但它是有限制的。我們只能應用純色。我們不能添加陰影、漸變、圓角或類似的東西。我們可以自定義的只是顏色。

滾動條裝訂線

你有沒有想過當內容在滾動容器中增長時我們如何避免布局變化?讓我們看下面的案例。

.box?{??padding:?1rem;??max-height:?220px;??overflow-y:?auto;
}

我們有一個16px四面都有填充物的容器。到現在為止,內容很短,滾動條沒有顯示,因為overflow-y: auto被使用(友情提示:當auto被使用時overflow-y,直到內容很長才會顯示滾動條)。

當內容增長時,將顯示滾動條,因此可用于內容的空間將減少。

注意當有滾動條時內容是如何移動的。那是因為瀏覽器應該為滾動條保留空間。

值得慶幸的是,現在可以通過scrollbar-gutter(在基于 Chromium 的瀏覽器 v94+ 中支持)來解決這個問題。它的工作方式可以讓我們提前預訂空間。默認值為auto,其他值為stable。還值得一提的是,有一個可選值both-edges顯示兩側的排水溝。

.box?{??padding:?1rem;??max-height:?220px;??overflow-y:?auto;??scrollbar-gutter:?stable;
}

指定自定義滾動條的范圍

要知道的重要一點是自定義滾動條的位置。您是否希望樣式通用并適用于網站上的所有滾動條?還是您只希望它用于特定部分?

使用舊語法,我們可以編寫選擇器而不將它們附加到元素,它們將應用于所有可滾動元素。

::-webkit-scrollbar?{??width:?10px;
}::-webkit-scrollbar-track?{??background-color:?darkgrey;
}::-webkit-scrollbar-thumb?{??box-shadow:?inset?0?0?6px?rgba(0,?0,?0,?0.3);
}

但是,如果您只想申請特定部分,則需要在選擇器之前附加該元素。

.section::-webkit-scrollbar?{??width:?10px;
}.section::-webkit-scrollbar-track?{??background-color:?darkgrey;
}.section::-webkit-scrollbar-thumb?{??box-shadow:?inset?0?0?6px?rgba(0,?0,?0,?0.3);
}

對于新的語法,幾乎是一樣的。如果你想要一個通用樣式,它應該應用于<html>元素,而不是<body>.

html?{??scrollbar-color:?#6969dd?#e0e0e0;??scrollbar-width:?thin;
}

到此,關于“CSS中div滾動條樣式如何設置”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注蝸牛博客網站,小編會繼續努力為大家帶來更多實用的文章!

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看