整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
定義滾動條現(xiàn)在越來越流行，很值得研究一翻。為什么需要自定義滾動？瀏覽器的默認的滾動條讓UI在多個操作系統(tǒng)中看起來不一致，使用定義滾動我們可以統(tǒng)一風格。
我一直對如何在CSS中定制滾動條很感興趣，但一直沒有機會這樣做。今天，我就記錄一下自己的學(xué)習過程。
首先需要介紹一下滾動條的組成部分。滾動條包含 track 和 thumb，如下圖所示：
track是滾動條的基礎(chǔ)，其中的 thumb是用戶拖動支頁面或章節(jié)內(nèi)的滾動。
還有一件重要的事情要記住，滾動條可以水平或垂直地工作，這取決于設(shè)計。另外，在一個多語言網(wǎng)站上工作時，這一點也會發(fā)生變化，該網(wǎng)站在從左到右（LTR）和從右到左（RTL）兩個方向上工作。
擁有一個自定義的滾動條曾經(jīng)是webkit的專利，所以Firefox和IE被排除在游戲之外。我們有一種新的語法，只在Firefox中使用，當它被完全支持時，將使我們的工作更容易。我們先看一下舊的Webkit語法，然后再介紹新的語法。
滾動條的寬度
首先，我們需要定義滾動條的大小。這可以是垂直滾動條的寬度，也可以是水平滾動條的高度。
.section::-webkit-scrollbar {
width: 10px;
}
有了這一設(shè)置，我們就可以設(shè)置滾動條本身的樣式。
滾動條 track
這代表了滾動條的基礎(chǔ)。我們可以通過添加background、shadows、border-radius和border來對它進行造型。
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
滾動條 thumb
準備好了滾動條的基礎(chǔ)后，我們就需要對滾動條的thumb進行樣式設(shè)計。這很重要，因為用戶可能會拖動這個thumb與滾動條進行交互。
.section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
至此，我們已經(jīng)介紹了CSS中定制滾動條的老方法。讓我們探索一下新的語法。
Scrollbar Width
正如它所說的，這定義了滾動條的寬度，有兩個值auto 和 thin。不好的地方就是，我們不能像webkit的語法那樣定義一個具體的數(shù)字。
.section {
scrollbar-width: thin;
}
Scrollbar Color
有了這個屬性，我們可以為滾動條 track和thumb定義成對值的顏色。
.section {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
盡管這個新語法很簡單，但它是有限制的。我們只能添加顏色。我們不能添加shadows``、gradients、rounded`，或任何類似的東西，我們被允許定制的只是顏色。
要知道的一個重要問題是，在哪里定制滾動條。你希望樣式是通用的，對網(wǎng)站上的所有滾動條都有效嗎？還是你只想讓它用于特定的部分？
使用舊的語法，我們可以編寫選擇器，而不必將它們附加到元素上，它們將應(yī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);
}
如果你想只適用于一個特定的部分，你需要在選擇器之前附加元素。
.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);
}
對于新的語法，它幾乎是一樣的。我注意到的是，如果你想要一個通用的樣式，它應(yīng)該被應(yīng)用于<html>元素，而不是<body>。
html {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
我嘗試為<body>添加上面的內(nèi)容，但它沒有像預(yù)期的那樣工作。
現(xiàn)在我們知道了新舊語法的工作原理，接著，我們開始定制一些滾動條設(shè)計。
例1
在研究定制滾動條之前，值得討論一下Mac OS中的默認樣式。下面是它的外觀。
對于Windows，它有點不同。
下面是我們根據(jù)上面的模擬圖來定制滾動條。
.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是必要的，因為它在::webkit-scrollbar上不起作用。
在新的語法中，我們不能調(diào)整滾動條的寬度，唯一能做的的是改變 track 和thumb的背景顏色。
.section {
scrollbar-color: #D4AA70 #e4e4e4;
}
例2
對于這個例子，設(shè)計有點重，因為它包含漸變和陰影。我們可以應(yīng)用內(nè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è)計。
.section::-webkit-scrollbar-thumb {
border-radius: 100px;
background: #8070D4;
border: 6px solid rgba(0,0,0,0.2);
}
基于同樣的例子，我們可以重置頂部和底部邊界為零，這樣thumb獲得一個有趣的效果。注意thumb頂部和底部的那些小元素。
示例地址：https://codepen.io/shadeed/pen/qBrGvOx
我們可以為新舊語法的滾動條thumb添加懸停效果。
/* 舊語法 */
.section::-webkit-scrollbar-thumb:hover {
background-color: #5749d2;
}
/* 新語法 */
.section {
scrollbar-color: #d4aa70 #e4e4e4;
transition: scrollbar-color 0.3s ease-out;
}
.section:hover {
scrollbar-color: #5749d2;
}
創(chuàng)建一個可滾動的元素是可以通過給overflow屬性添加一個除visible以外的值。建議使用auto關(guān)鍵字，因為它只在內(nèi)容超過其容器時才會顯示滾動條。
.section {
overflow-y: auto;
}
在定制滾動條設(shè)計時，請記住在 thumb 和 track之間要有良好的對比，這樣它就容易被用戶注意。
考慮一下下面這個自定義滾動條的 "壞 "例子。
thumb 的顏色幾乎看不出來。這對用戶來說不是好事，因為如果他們習慣于通過thumb 滾動，這將增加他們的難度。
作者：ishadeed 譯者：前端小智 來源：ishadeed
原文：https://ishadeed.com/article/custom-scrollbars-css/
頁中添加滾動字幕效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滾動字體的設(shè)置</title>
</head>
<body>
<canvas id="canvas1" width="600" height="600" style="border:1px solid #000000"></canvas>
<script type="text/javascript">
var canvas1 = document.querySelector("#canvas1") // 1.找到畫布對象
var ctx = canvas1.getContext("2d") // 2.上下文對象（畫筆）
ctx.shadowBlur = 10; // 陰影距離
ctx.shadowColor = "red" // 陰影顏色
ctx.shadowOffsetX = 30 // 陰影偏移
ctx.shadowOffsetY = 30 // 陰影偏移
ctx.font = "150px 楷體"
ctx.fillText("你好！", 20,150)
ctx.fillText("你好！", 20,350)
ctx.strokeText('你好！',23, 153)
ctx.strokeText('你好',23, 553)
canvas繪制文字
var x = 600
setInterval(function(){
if(x > -350){
//清空畫布
ctx.clearRect(0,0,600,600)
ctx.strokeText('你好！',x, 153)
ctx.fillText("你好！", x,350)
ctx.font = "50px 宋體"
ctx.strokeText('每天學(xué)習一點點',x, 553)
x -= 3
}else{x=590}
}, 16)
</script>
</body>
</html>
在Firefox中單獨設(shè)置滾動條樣式，你可以使用?@-moz-document??規(guī)則。這個規(guī)則允許你為特定的瀏覽器或瀏覽器引擎應(yīng)用樣式。
下面是一個例子，演示如何在Firefox中隱藏滾動條：
@-moz-document url-prefix() {
/* 在這里添加只對Firefox生效的樣式 */
body {
scrollbar-width: none;
}
}在上面的例子中，??@-moz-document url-prefix()??表示只有在URL以空字符串（即所有URL）為前綴的情況下，才會應(yīng)用其中的樣式。在??body??元素中，??scrollbar-width: none;??將隱藏滾動條。
請注意，這樣的規(guī)則只在Firefox中生效，而在其他瀏覽器中會被忽略。確保在使用這樣的規(guī)則時進行測試，以確保所需的效果在目標瀏覽器中按預(yù)期工作。
在CSS中，??*???（星號）和 ??body?? 分別選擇不同的元素或元素集合。
* {
margin: 0;
padding: 0;
}上述代碼會將頁面中所有元素的內(nèi)外邊距設(shè)置為零。
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
}上述代碼會將文檔主體部分的字體設(shè)置為 Arial，并將背景顏色設(shè)置為 #f0f0f0。
所以，??*??? 是一個通用的選擇器，匹配所有元素，而 ??body??? 是特定于文檔主體的選擇器，用于選擇文檔主體元素并應(yīng)用樣式。在某些情況下，你可能希望使用 ??body?? 選擇器，以更有針對性地影響文檔的主要內(nèi)容區(qū)域。
在最新的 Firefox 版本中，??-moz-scrollbar-thumb?? 偽類選擇器已被棄用，取而代之的是使用更通用的 CSS Scrollbar 模塊規(guī)范。為了在 Firefox 中優(yōu)化滾動條并使其變細，你可以使用新的規(guī)范中的屬性。
以下是一個簡單的示例，可以使 Firefox 中的滾動條變細：
/* Firefox 滾動條樣式 */
* {
scrollbar-width: thin;
scrollbar-color: #999999 #f0f0f0;
}
/* Webkit 滾動條樣式（Chrome, Safari等）*/
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-thumb {
background-color: #999999;
}
*::-webkit-scrollbar-track {
background-color: #f0f0f0;
}上述樣式包含兩部分：
請注意，滾動條樣式在不同瀏覽器中可能會有所不同，因此上述樣式在 Firefox 中有效，而 Webkit 樣式在 Chrome 和 Safari 中有效。在實際使用中，你可能需要根據(jù)需要進行調(diào)整和測試，以確保在不同瀏覽器中都能達到預(yù)期的效果。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
