建站
咨詢
售后
建站咨詢
新聞中心
自定義滾動(dòng)條現(xiàn)在越來(lái)越流行，很值得研究一翻。為什么需要自定義滾動(dòng)?瀏覽器的默認(rèn)的滾動(dòng)條讓UI在多個(gè)操作系統(tǒng)中看起來(lái)不一致，使用定義滾動(dòng)我們可以統(tǒng)一風(fēng)格。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比阿拉山口網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式阿拉山口網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋阿拉山口地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。
我一直對(duì)如何在CSS中定制滾動(dòng)條很感興趣，但一直沒(méi)有機(jī)會(huì)這樣做。今天，我就記錄一下自己的學(xué)習(xí)過(guò)程。
簡(jiǎn)介
首先需要介紹一下滾動(dòng)條的組成部分。滾動(dòng)條包含 track 和 thumb，如下圖所示：
track是滾動(dòng)條的基礎(chǔ)，其中的 thumb是用戶拖動(dòng)支頁(yè)面或章節(jié)內(nèi)的滾動(dòng)。
還有一件重要的事情要記住，滾動(dòng)條可以水平或垂直地工作，這取決于設(shè)計(jì)。另外，在一個(gè)多語(yǔ)言網(wǎng)站上工作時(shí)，這一點(diǎn)也會(huì)發(fā)生變化，該網(wǎng)站在從左到右(LTR)和從右到左(RTL)兩個(gè)方向上工作。
自定義滾動(dòng)條設(shè)計(jì)
擁有一個(gè)自定義的滾動(dòng)條曾經(jīng)是webkit的專利，所以Firefox和IE被排除在游戲之外。我們有一種新的語(yǔ)法，只在Firefox中使用，當(dāng)它被完全支持時(shí)，將使我們的工作更容易。我們先看一下舊的Webkit語(yǔ)法，然后再介紹新的語(yǔ)法。
舊的語(yǔ)法
滾動(dòng)條的寬度
首先，我們需要定義滾動(dòng)條的大小。這可以是垂直滾動(dòng)條的寬度，也可以是水平滾動(dòng)條的高度。
- .section::-webkit-scrollbar {
- width: 10px;
- }
有了這一設(shè)置，我們就可以設(shè)置滾動(dòng)條本身的樣式。
滾動(dòng)條 track
這代表了滾動(dòng)條的基礎(chǔ)。我們可以通過(guò)添加background、shadows、border-radius和border來(lái)對(duì)它進(jìn)行造型。
- .section::-webkit-scrollbar-track {
- background-color: darkgrey;
- }
滾動(dòng)條 thumb
準(zhǔn)備好了滾動(dòng)條的基礎(chǔ)后，我們就需要對(duì)滾動(dòng)條的thumb進(jìn)行樣式設(shè)計(jì)。這很重要，因?yàn)橛脩艨赡軙?huì)拖動(dòng)這個(gè)thumb與滾動(dòng)條進(jìn)行交互。
- .section::-webkit-scrollbar-thumb {
- box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
- }
至此，我們已經(jīng)介紹了CSS中定制滾動(dòng)條的老方法。讓我們探索一下新的語(yǔ)法。
新語(yǔ)法
Scrollbar Width
正如它所說(shuō)的，這定義了滾動(dòng)條的寬度，有兩個(gè)值auto 和 thin。不好的地方就是，我們不能像webkit的語(yǔ)法那樣定義一個(gè)具體的數(shù)字。
- .section {
- scrollbar-width: thin;
- }
Scrollbar Color
有了這個(gè)屬性，我們可以為滾動(dòng)條 track和thumb定義成對(duì)值的顏色。
- .section {
- scrollbar-color: #6969dd #e0e0e0;
- scrollbar-width: thin;
- }
盡管這個(gè)新語(yǔ)法很簡(jiǎn)單，但它是有限制的。我們只能添加顏色。我們不能添加shadows``、gradients、rounded`，或任何類似的東西，我們被允許定制的只是顏色。
指定自定義滾動(dòng)條的范圍
要知道的一個(gè)重要問(wèn)題是，在哪里定制滾動(dòng)條。你希望樣式是通用的，對(duì)網(wǎng)站上的所有滾動(dòng)條都有效嗎?還是你只想讓它用于特定的部分?
使用舊的語(yǔ)法，我們可以編寫(xiě)選擇器，而不必將它們附加到元素上，它們將應(yīng)用于所有可滾動(dòng)的元素。
- ::-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);
- }
如果你想只適用于一個(gè)特定的部分，你需要在選擇器之前附加元素。
- .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);
- }
對(duì)于新的語(yǔ)法，它幾乎是一樣的。我注意到的是，如果你想要一個(gè)通用的樣式，它應(yīng)該被應(yīng)用于元素，而不是。
- html {
- scrollbar-color: #6969dd #e0e0e0;
- scrollbar-width: thin;
- }
我嘗試為添加上面的內(nèi)容，但它沒(méi)有像預(yù)期的那樣工作。
現(xiàn)在我們知道了新舊語(yǔ)法的工作原理，接著，我們開(kāi)始定制一些滾動(dòng)條設(shè)計(jì)。
自定義滾動(dòng)條設(shè)計(jì)
例1
在研究定制滾動(dòng)條之前，值得討論一下Mac OS中的默認(rèn)樣式。下面是它的外觀。
- 滾動(dòng)條track 的左右兩邊都有邊框，背景色為純色。
- 滾動(dòng)條thumb是圓形的，左右兩邊都有空間。
對(duì)于Windows，它有點(diǎn)不同。
下面是我們根據(jù)上面的模擬圖來(lái)定制滾動(dòng)條。
- .section::-webkit-scrollbar {
- width: 16px;
- }
- .section::-webkit-scrollbar-track {
- background-color: #e4e4e4;
- border-radius: 100px;
- }
- .section::-webkit-scrollbar-thumb {
- background-color: #d4aa70;
- border-radius: 100px;
- }
為 track 和thumb添加border-radius是必要的，因?yàn)樗?:webkit-scrollbar上不起作用。
在新的語(yǔ)法中，我們不能調(diào)整滾動(dòng)條的寬度，唯一能做的的是改變 track 和thumb的背景顏色。
- .section {
- scrollbar-color: #D4AA70 #e4e4e4;
- }
例2
對(duì)于這個(gè)例子，設(shè)計(jì)有點(diǎn)重，因?yàn)樗瑵u變和陰影。我們可以應(yīng)用內(nèi)部陰影和漸變來(lái)模仿這種效果。來(lái)看看怎么做!
- .section::-webkit-scrollbar-thumb {
- background-image: linear-gradient(180deg, #D0368A 0%, #708AD4 99%);
- box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
- border-radius: 100px;
- }
示例地址：https://codepen.io/shadeed/pen/VwpOReG
例3
我們還可以為 thumb 和track添加邊框，這可以幫助我們處理一些棘手的設(shè)計(jì)。
- .section::-webkit-scrollbar-thumb {
- border-radius: 100px;
- background: #8070D4;
- border: 6px solid rgba(0,0,0,0.2);
- }
基于同樣的例子，我們可以重置頂部和底部邊界為零，這樣thumb獲得一個(gè)有趣的效果。注意thumb頂部和底部的那些小元素。
示例地址：https://codepen.io/shadeed/pen/qBrGvOx
可以添加懸停效果嗎?
我們可以為新舊語(yǔ)法的滾動(dòng)條thumb添加懸停效果。
- /* 舊語(yǔ)法 */
- .section::-webkit-scrollbar-thumb:hover {
- background-color: #5749d2;
- }
- /* 新語(yǔ)法 */
- .section {
- scrollbar-color: #d4aa70 #e4e4e4;
- transition: scrollbar-color 0.3s ease-out;
- }
- .section:hover {
- scrollbar-color: #5749d2;
- }
需要時(shí)顯示滾動(dòng)條
創(chuàng)建一個(gè)可滾動(dòng)的元素是可以通過(guò)給overflow屬性添加一個(gè)除visible以外的值。建議使用auto關(guān)鍵字，因?yàn)樗辉趦?nèi)容超過(guò)其容器時(shí)才會(huì)顯示滾動(dòng)條。
- .section {
- overflow-y: auto;
- }
可訪問(wèn)性問(wèn)題
在定制滾動(dòng)條設(shè)計(jì)時(shí)，請(qǐng)記住在 thumb 和 track之間要有良好的對(duì)比，這樣它就容易被用戶注意。
考慮一下下面這個(gè)自定義滾動(dòng)條的 "壞 "例子。
thumb 的顏色幾乎看不出來(lái)。這對(duì)用戶來(lái)說(shuō)不是好事，因?yàn)槿绻麄兞?xí)慣于通過(guò)thumb 滾動(dòng)，這將增加他們的難度。
作者：ishadeed
譯者：前端小智 來(lái)源：ishadeed
原文：https://ishadeed.com/article/custom-scrollbars-css/
本文標(biāo)題：學(xué)會(huì)使用CSS自定義滾動(dòng)條，能讓你做的產(chǎn)品更有用戶體驗(yàn)！
路徑分享：http://www.5511xx.com/article/djccgss.html
