html中滾動字體的設置

頁中添加滾動字幕效果

<!DOCTYPE html>

<html>

<head>

<title>滾動字體的設置</title>

</head>

<body>

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('每天學習一點點',x, 553)

x -= 3

}else{x=590}

}, 16)

</script>

</body>

</html>

看個錨點定位的例子

發現頁面唰的一些就到頂部了，快到我們懵逼了。。。

開始解決

scroll-behavior

CSS屬性 scroll-behavior 為一個滾動框指定滾動行為，其他任何的滾動，例如那些由于用戶行為而產生的滾動，不受這個屬性的影響。在根元素中指定這個屬性時，它反而適用于視窗。

scroll-behavior:smooth 寫在滾動容器元素上，可以讓容器的滾動變得平滑。

在網頁默認滾動是在<html>標簽上，移動端大多數在<body>標簽上。

我們可以這樣加：

html, 
body { scroll-behavior:smooth; }

加了以后的效果如下：

這是錄制的GIF圖，效果沒那么好。大家可以動手試一下，滑動體驗非常不錯。

缺點

兼容性不夠好

當然我們可以通過js來做個類似

Element.scrollIntoView() 方法

DOM元素的scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內，通過觸發滾動容器的定位實現。

DOM元素的scrollIntoView()方法是原生JS 兼容到IE6，兼容性非常好。

參數如下

{
 behavior: "auto" | "instant" | "smooth", // 默認 auto
 block: "start" | "center" | "end" | "nearest", // 默認 center
 inline: "start" | "center" | "end" | "nearest", // 默認 nearest
}

解釋一下這三個參數：

behavior 表示滾動方式。auto 表示使用當前元素的 scroll-behavior 樣式。instant 和 smooth 表示直接滾到底和使用平滑滾動。
block 表示塊級元素排列方向要滾動到的位置。對于默認的 writing-mode: horizontal-tb 來說，就是豎直方向。start 表示將視口的頂部和元素頂部對齊；center 表示將視口的中間和元素的中間對齊；end 表示將視口的底部和元素底部對齊；nearest 表示就近對齊。
inline 表示行內元素排列方向要滾動到的位置。對于默認的 writing-mode: horizontal-tb 來說，就是水平方向。其值與 block 類似。

用法：

html:

<div class="wrap">
 <div onClick="onScrollIntoView()">點擊讓黑色塊到頂部</div>
 <ul class="body">
 <li>1</li>
 <li>2</li>
 <li id="box">我是黑色</li>
 <li>3</li>
 <li>4</li>
 </ul>
</div>

js:

function onScrollIntoView () {
 var element = document.getElementById("box");
 element.scrollIntoView({behavior: "smooth"});
}

效果：

這回大家再也不用害怕做錨點定位啦。

最后我們在說一個關于頁面滾動問題吧，那就是 返回頂部 功能實現

返回頂部功能實現

我們常用定時器 setInterval 來不斷減去高度。

如：當前距離頂部 1000，我們每10毫秒減50，

var timer = setInterval(function() { // 定時器 每10毫秒執行一次
 // 頂部距離 document.body.scrollTop = 1000 
 var speed = 50 // 返回頂部速度 
 document.body.scrollTop = document.body.scrollTop - speed
 if (document.body.scrollTop === 0) { // 返回到達頂部后， 銷毀定時器
 clearInterval(timer)
 }
}, 10)

效果：

大家會發現，頁面返回是滾動起來很干。沒10毫秒減50. 很平均，在交互上效果并不好。

借鑒上面 scroll-behavior:smooth 的交互效果。緩動的返回頂部。

改一下計算方式：1000/2 = 500, 500/2 =250, 250/2 = ...... 這樣滑動起來是不是就平滑了呢？

換算成公式：開始位置 = 開始位置 + (結束位置 - 開始位置) / 速度

document.body.scrollTop = 1000 + (0 - 1000) / 2

公式太煩了還是上代碼吧：

var onTop = function (a, b, c, d) {
 if (a == b || typeof a != 'number') {
 return
 }
 b = b || 0
 c = c || 2
 
 var speed = function () {
 a = a + (b - b) / c
 
 if (a < 1) {
 d(b, true)
 return
 }
 d(a, false)
 requestAnimationFrame(speed)
 }
 speed()
}

a 開始位置
b 結束位置
c 速度
d 位置回調，d(當前的位置值, 否動畫結束)

調用：

var target = document.body.scrollTop ? document.body : document.documentElement
onTop(target.scrollTop, 0, 4, function (value) {
 target.scrollTop = value
})

效果：

Ps: gif錄制效果不好，大家可以動手寫一下DEMO

在Firefox中單獨設置滾動條樣式，你可以使用?@-moz-document??規則。這個規則允許你為特定的瀏覽器或瀏覽器引擎應用樣式。

下面是一個例子，演示如何在Firefox中隱藏滾動條：

@-moz-document url-prefix() {
  /* 在這里添加只對Firefox生效的樣式 */
  body {
    scrollbar-width: none;
  }
}

在上面的例子中，??@-moz-document url-prefix()??表示只有在URL以空字符串（即所有URL）為前綴的情況下，才會應用其中的樣式。在??body??元素中，??scrollbar-width: none;??將隱藏滾動條。

請注意，這樣的規則只在Firefox中生效，而在其他瀏覽器中會被忽略。確保在使用這樣的規則時進行測試，以確保所需的效果在目標瀏覽器中按預期工作。

在CSS中，??*???（星號）和 ??body?? 分別選擇不同的元素或元素集合。

*?（星號）選擇器：這是通配符選擇器，匹配文檔中的所有元素。使用 * 會選擇頁面上的每個元素，無論是塊級元素、行內元素還是其他類型的元素。例如：

* {
  margin: 0;
  padding: 0;
}

上述代碼會將頁面中所有元素的內外邊距設置為零。

body? 選擇器： 這是針對文檔的 <body> 元素的選擇器。body 選擇器用于針對整個文檔的主體部分應用樣式。例如：

body {
  font-family: 'Arial', sans-serif;
  background-color: #f0f0f0;
}

上述代碼會將文檔主體部分的字體設置為 Arial，并將背景顏色設置為 #f0f0f0。

所以，??*??? 是一個通用的選擇器，匹配所有元素，而 ??body??? 是特定于文檔主體的選擇器，用于選擇文檔主體元素并應用樣式。在某些情況下，你可能希望使用 ??body?? 選擇器，以更有針對性地影響文檔的主要內容區域。

在最新的 Firefox 版本中，??-moz-scrollbar-thumb?? 偽類選擇器已被棄用，取而代之的是使用更通用的 CSS Scrollbar 模塊規范。為了在 Firefox 中優化滾動條并使其變細，你可以使用新的規范中的屬性。

以下是一個簡單的示例，可以使 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;
}

上述樣式包含兩部分：

??scrollbar-width?? 和 scrollbar-color 是 Firefox 滾動條樣式的屬性。scrollbar-width: thin; 會使滾動條變細，而 scrollbar-color 用于定義滾動條的顏色。在這里，滾動條顏色被設置為灰色 (#999999)，滾動條軌道的顏色被設置為淡灰色 (#f0f0f0)。
對于 Webkit 內核的瀏覽器（如 Chrome 和 Safari），使用 ::-webkit-scrollbar、::-webkit-scrollbar-thumb 和 ::-webkit-scrollbar-track 來定義滾動條樣式。

請注意，滾動條樣式在不同瀏覽器中可能會有所不同，因此上述樣式在 Firefox 中有效，而 Webkit 樣式在 Chrome 和 Safari 中有效。在實際使用中，你可能需要根據需要進行調整和測試，以確保在不同瀏覽器中都能達到預期的效果。

在線咨詢

上一篇：大膽嘗試這些新的CSS屬性，釋放CSS的力量吧（一）
下一篇：不使用 Javascript 也可以和瀏覽器進行交互？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html中滾動字體的設置

scroll-behavior

缺點

Element.scrollIntoView() 方法

返回頂部 功能實現

您的項目需求

返回頂部功能實現