html中滾動(dòng)字體的設(shè)置

頁中添加滾動(dòng)字幕效果

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var canvas1 = document.querySelector("#canvas1") // 1.找到畫布對(duì)象

var ctx = canvas1.getContext("2d") // 2.上下文對(duì)象（畫筆）

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í)一點(diǎn)點(diǎn)',x, 553)

x -= 3

}else{x=590}

}, 16)

</script>

</body>

</html>

看個(gè)錨點(diǎn)定位的例子

發(fā)現(xiàn)頁面唰的一些就到頂部了，快到我們懵逼了。。。

開始解決

scroll-behavior

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

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

在網(wǎng)頁默認(rèn)滾動(dòng)是在<html>標(biāo)簽上，移動(dòng)端大多數(shù)在<body>標(biāo)簽上。

我們可以這樣加：

html, 
body { scroll-behavior:smooth; }

加了以后的效果如下：

這是錄制的GIF圖，效果沒那么好。大家可以動(dòng)手試一下，滑動(dòng)體驗(yàn)非常不錯(cuò)。

缺點(diǎn)

兼容性不夠好

當(dāng)然我們可以通過js來做個(gè)類似

Element.scrollIntoView() 方法

DOM元素的scrollIntoView() 方法讓當(dāng)前的元素滾動(dòng)到瀏覽器窗口的可視區(qū)域內(nèi)，通過觸發(fā)滾動(dòng)容器的定位實(shí)現(xiàn)。

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

參數(shù)如下

{
 behavior: "auto" | "instant" | "smooth", // 默認(rèn) auto
 block: "start" | "center" | "end" | "nearest", // 默認(rèn) center
 inline: "start" | "center" | "end" | "nearest", // 默認(rèn) nearest
}

解釋一下這三個(gè)參數(shù)：

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

用法：

html:

<div class="wrap">
 <div onClick="onScrollIntoView()">點(diǎn)擊讓黑色塊到頂部</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"});
}

效果：

這回大家再也不用害怕做錨點(diǎn)定位啦。

最后我們?cè)谡f一個(gè)關(guān)于頁面滾動(dòng)問題吧，那就是 返回頂部 功能實(shí)現(xiàn)

返回頂部功能實(shí)現(xiàn)

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

如：當(dāng)前距離頂部 1000，我們每10毫秒減50，

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

效果：

大家會(huì)發(fā)現(xiàn)，頁面返回是滾動(dòng)起來很干。沒10毫秒減50. 很平均，在交互上效果并不好。

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

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

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

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 結(jié)束位置
c 速度
d 位置回調(diào)，d(當(dāng)前的位置值, 否動(dòng)畫結(jié)束)

調(diào)用：

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

效果：

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

在Firefox中單獨(dú)設(shè)置滾動(dòng)條樣式，你可以使用?@-moz-document??規(guī)則。這個(gè)規(guī)則允許你為特定的瀏覽器或?yàn)g覽器引擎應(yīng)用樣式。

下面是一個(gè)例子，演示如何在Firefox中隱藏滾動(dòng)條：

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

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

請(qǐng)注意，這樣的規(guī)則只在Firefox中生效，而在其他瀏覽器中會(huì)被忽略。確保在使用這樣的規(guī)則時(shí)進(jìn)行測(cè)試，以確保所需的效果在目標(biāo)瀏覽器中按預(yù)期工作。

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

*?（星號(hào)）選擇器：這是通配符選擇器，匹配文檔中的所有元素。使用 * 會(huì)選擇頁面上的每個(gè)元素，無論是塊級(jí)元素、行內(nèi)元素還是其他類型的元素。例如：

* {
  margin: 0;
  padding: 0;
}

上述代碼會(huì)將頁面中所有元素的內(nèi)外邊距設(shè)置為零。

body? 選擇器： 這是針對(duì)文檔的 <body> 元素的選擇器。body 選擇器用于針對(duì)整個(gè)文檔的主體部分應(yīng)用樣式。例如：

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

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

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

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

以下是一個(gè)簡(jiǎn)單的示例，可以使 Firefox 中的滾動(dòng)條變細(xì)：

/* Firefox 滾動(dòng)條樣式 */
* {
  scrollbar-width: thin;
  scrollbar-color: #999999 #f0f0f0;
}

/* Webkit 滾動(dòng)條樣式（Chrome, Safari等）*/
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-thumb {
  background-color: #999999;
}

*::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

上述樣式包含兩部分：

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

請(qǐng)注意，滾動(dòng)條樣式在不同瀏覽器中可能會(huì)有所不同，因此上述樣式在 Firefox 中有效，而 Webkit 樣式在 Chrome 和 Safari 中有效。在實(shí)際使用中，你可能需要根據(jù)需要進(jìn)行調(diào)整和測(cè)試，以確保在不同瀏覽器中都能達(dá)到預(yù)期的效果。

在線咨詢

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。