當(dāng)前位置：首頁 > 科技 > 軟件

純 CSS 檢測(cè)滾動(dòng)的速度和方向

來源：責(zé)編：時(shí)間：2024-06-27 17:14:26 204觀看

導(dǎo)讀CSS可以做的事情越來越越多了。我們經(jīng)常會(huì)碰到這樣的場(chǎng)景，很多網(wǎng)頁會(huì)在右下角放一個(gè)固定入口，有可能是返回頂部，有可能廣告，為了避免干擾，在頁面滾動(dòng)時(shí)，會(huì)把這些入口臨時(shí)收起來，停止?jié)L動(dòng)后再出現(xiàn)，就像這樣圖片通常我們實(shí)現(xiàn)這

CSS可以做的事情越來越越多了。

我們經(jīng)常會(huì)碰到這樣的場(chǎng)景，很多網(wǎng)頁會(huì)在右下角放一個(gè)固定入口，有可能是返回頂部，有可能廣告，為了避免干擾，在頁面滾動(dòng)時(shí)，會(huì)把這些入口臨時(shí)收起來，停止?jié)L動(dòng)后再出現(xiàn)，就像這樣

圖片

通常我們實(shí)現(xiàn)這樣的效果會(huì)借助JS的定時(shí)器，并且監(jiān)聽頁面滾動(dòng)，其實(shí)也不復(fù)雜，大概是這樣實(shí)現(xiàn)

let timer;window.addEventListener('scroll', function(){  // 是否在滾動(dòng)  isScroll = true  timer && clearTimeout(timer)  timer = setTimeout(() => {    isScroll = false  }, 150)})

現(xiàn)如今，CSS也能實(shí)現(xiàn)這樣的功能了，也就是可以檢測(cè)頁面是否在滾動(dòng)，進(jìn)一步，還能檢測(cè)滾動(dòng)的速度和方向，一起來看看吧~

一、CSS 檢測(cè)原理

說起原理，其實(shí)和JS是差不多的，都是有個(gè)類似于定時(shí)、延時(shí)的機(jī)制。那具體如何做呢？下面一步一步來介紹。

比如，我們有這樣一個(gè)可以滾動(dòng)的頁面；

<body>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>	...</body>

簡(jiǎn)單修飾一下，效果是這樣的；

圖片

然后我們需要用 CSS檢測(cè)滾動(dòng)的進(jìn)度，該如何做呢？沒錯(cuò)，就是用 CSS變量。

假設(shè)有一個(gè)這樣的動(dòng)畫，--scroll-position從0變到100，如下：

@keyframes adjust-pos {  form {     --scroll-position: 0;  }  to {    --scroll-position: 100;  }}

為了方便演示，我們可以把這個(gè)動(dòng)畫的變化過程顯示在頁面上；

<div class="debug" hidden>  <div data-id="--scroll-position"></div></div>

這里利用CSS計(jì)數(shù)器，直接用偽元素顯示CSS變量值；

具體實(shí)現(xiàn)如下：

:root {  animation: adjust-pos linear 3s;}.debug{  counter-reset: scroll-position calc(var(--scroll-position) * 1);}[data-id="--scroll-position"]::after {  content: "--scroll-position: " counter(scroll-position);}

現(xiàn)在效果如下：

圖片

現(xiàn)在數(shù)字直接從0變到了100，沒有中間的過程。

這是因?yàn)?-scroll-position是一個(gè)自定義變量，無法直接過渡。為了使這個(gè)變量也能像普通的過渡屬性自動(dòng)過渡，需要用到CSS @property，也就是需要注冊(cè)這個(gè)變量，讓瀏覽器認(rèn)為這是一個(gè)合法的 CSS 變量。

@property --scroll-position {  syntax: "<number>";  inherits: true;  initial-value: 0;}

這段代碼表示--scroll-position是一個(gè)number類型的數(shù)據(jù)，是一個(gè)合法的，可以過渡的類型，自然也就有動(dòng)畫了，效果如下：

圖片

然后我們加上滾動(dòng)驅(qū)動(dòng)動(dòng)畫，讓這個(gè)動(dòng)畫跟隨頁面滾動(dòng)。

:root {  animation: adjust-pos 3s linear both;  animation-timeline: scroll();}

效果如下，這樣就能檢測(cè)到滾動(dòng)的具體位置了。

圖片

當(dāng)然，僅僅這樣還是不夠的，我們只知道了滾動(dòng)的進(jìn)度，并不知道滾動(dòng)的狀態(tài)。

為了知道滾動(dòng)的速度，我們還需要另一個(gè)變量，假設(shè)是--scroll-position-delayed。

@property --scroll-position-delayed {  syntax: "<number>";  inherits: true;  initial-value: 0;}@keyframes adjust-pos {  form {     --scroll-position: 0;    --scroll-position-delayed: 0;  }  to {    --scroll-position: 100;    --scroll-position-delayed: 100;  }}

這樣就有了兩個(gè)變量在同時(shí)變化，效果如下：

圖片

同時(shí)變化沒有什么意義，我們需要加一點(diǎn)延時(shí)，就像 JS的定時(shí)器一樣，這里我們可以直接通過transition來實(shí)現(xiàn)。

body{  margin: 0;  transition: --scroll-position-delayed 0.15s linear;}

這里的0.15s表示--scroll-position-delayed在變化時(shí)需要0.15s的時(shí)間，而--scroll-position是瞬時(shí)完成的，所以就相當(dāng)于--scroll-position-delayed始終比--scroll-position慢了0.15秒，也就相當(dāng)于延時(shí)了0.15s，實(shí)際效果如下：

圖片

是不是可以很清楚的看到下面的數(shù)值要比上面的慢一點(diǎn)？

有了這個(gè)時(shí)間差，我們就可以判斷當(dāng)前的滾動(dòng)狀態(tài)了。

比如我們可以用一個(gè)變量--scroll-velocity來表示兩者的差值。

body{  --scroll-velocity: calc(var(--scroll-position) - var(--scroll-position-delayed));}

效果如下：

圖片

通過這個(gè)差值，我們是不是就能發(fā)現(xiàn)一些規(guī)律？

當(dāng)--scroll-velocity為0時(shí)，表示滾動(dòng)停止，否則表示正在滾動(dòng)中。
當(dāng)--scroll-velocity大于0時(shí)，表示滾動(dòng)方向?yàn)橄隆?/li>
當(dāng)--scroll-velocity小于0時(shí)，表示滾動(dòng)方向?yàn)樯稀?/li>
還可以從--scroll-velocity的絕對(duì)值上考慮，絕對(duì)值越大，表示滾動(dòng)速度越快，反之則越慢。

這就是CSS檢測(cè)的原理了，是不是還算簡(jiǎn)單呢？不過這還沒完，還需要具體實(shí)現(xiàn)，比如怎么根據(jù)這個(gè)變量來匹配對(duì)應(yīng)的樣式。

二、CSS 樣式查詢

回到文章開頭，我們?nèi)绾螜z測(cè)是否正在滾動(dòng)呢，并且在滾動(dòng)的時(shí)候隱藏右下角懸浮按鈕呢？下面就來實(shí)現(xiàn)這樣一個(gè)功能。

既然當(dāng)--scroll-velocity為0時(shí)，就表示滾動(dòng)停止，那我們是不是可以直接用樣式查詢來匹配呢？

@container - CSS: Cascading Style Sheets | MDN (mozilla.org)[1]

CSS 樣式查詢是容器查詢的一部分，從名稱也可以看出，它可以查詢?cè)氐臉邮剑M(jìn)而設(shè)置額外的樣式。比如默認(rèn)是隱藏的。

.back{  transform: translateX(100%);  transition: .2s;}

當(dāng)匹配到--scroll-velocity:0時(shí)，顯示這個(gè)懸浮按鈕，就可以這樣來實(shí)現(xiàn)。

@container style(--scroll-velocity: 0) {  .back{    transform: translateX(0);  }}

效果如下：

圖片

好像并沒有起效果？其實(shí)和前面的動(dòng)畫原理差不多，這是一個(gè)CSS自定義變量，無法直接檢測(cè)到變化的值。這里有一個(gè)解決方案，為了保證能夠樣式查詢到，需要用@property注冊(cè)一下：

@property --scroll-velocity {  syntax: "<number>";  inherits: true;  initial-value: 0;}

這樣就能完美檢測(cè)了。

你也可以訪問線上鏈接來查看實(shí)際效果。

CSS scroll-speed (juejin.cn)[2]

是不是非常簡(jiǎn)單？

三、CSS 變量計(jì)算

除了使用樣式查詢外，我們還可以用CSS變量的計(jì)算方式來實(shí)現(xiàn)。

什么意思呢？比如我們想知道是否在滾動(dòng)，其實(shí)就是兩個(gè)狀態(tài)，那能不能用0和1來表示是否在滾動(dòng)呢？那就需要做一點(diǎn)點(diǎn)變換了。

現(xiàn)在--scroll-velocity表示差值，范圍可能是-50~50，那如何轉(zhuǎn)換成1~0呢，很簡(jiǎn)單，直接除以自身就行了, 比如-50/-50和50/50結(jié)果都是1，有人會(huì)奇怪0/0會(huì)不會(huì)無限大，沒關(guān)系，這里CSS計(jì)算的結(jié)果還是0，實(shí)現(xiàn)如下：

body{  --scroll-velocity: calc(var(--scroll-position) - var(--scroll-position-delayed));  --scroll-dynamic: calc(var(--scroll-velocity) / var(--scroll-velocity));}

這樣的話，我們就無需樣式查詢來改變右下角懸浮按鈕的狀態(tài)了，直接用--scroll-dynamic來控制transform

.back{  transform: translateX(calc(var(--scroll-dynamic) * 100%));}

看看效果：

圖片

不一樣的實(shí)現(xiàn)也能得到相同的效果，你也可以訪問線上鏈接來查看實(shí)際效果。

CSS scroll-dynamic - (juejin.cn)[3]

除了可以得到是否在滾動(dòng)，還能計(jì)算得到滾動(dòng)方向，比如1表示向下，-1表示向上，我們可以這樣來計(jì)算。

body{  --scroll-velocity: calc(var(--scroll-position) - var(--scroll-position-delayed));  --scroll-speed: max(var(--scroll-velocity), -1 * var(--scroll-velocity));	--scroll-direction: calc(var(--scroll-velocity) / var(--scroll-speed));}

看似有點(diǎn)復(fù)雜，其實(shí)也不難理解。比如當(dāng)前差值是-30，那么，我們可以通過乘以-1，然后取兩者較大值，這樣就能得到絕對(duì)值了。

圖片

上面其實(shí)是個(gè)“偏方”，關(guān)于絕對(duì)值，其實(shí)已經(jīng)有CSS abs()了，只是現(xiàn)在還沒有支持，相信以后就能用上了。

然后用原值除以這個(gè)絕對(duì)值，就能得到1或者-1了。

利用這個(gè)特性，我們可以在不同的方向改變箭頭的指向。

.back{  transform: scaleY(var(--scroll-direction));}

效果如下：

圖片

你也可以訪問線上鏈接來查看實(shí)際效果：

CSS scroll-dynamic (juejin.cn)[4]

四、更多有趣的案例

除了上面幾個(gè)應(yīng)用，我還找了幾個(gè)有趣的案例。

比如下面這種蟲洞效果，在水平或者垂直方向滾動(dòng)時(shí)，會(huì)有明顯的透視效果https://codepen.io/bramus/pen/wvRqVBm

圖片

再比如這種上下滾動(dòng)，可以看到不同方向上內(nèi)容的傾斜角度不一樣，而且滾動(dòng)越快，傾斜越大：https://codepen.io/bramus/pen/OJrxBaL

還有一個(gè)比較簡(jiǎn)單實(shí)用的運(yùn)動(dòng)模糊滾動(dòng)，也就是在滾動(dòng)時(shí)，頁面會(huì)有模糊的效果：https://codepen.io/bramus/pen/XWoREjv

五、最后總結(jié)一下

說了這么多，核心原理其實(shí)就這么幾行，如下：

@property --scroll-position {  syntax: "<number>";  inherits: true;  initial-value: 0;}@property --scroll-position-delayed {  syntax: "<number>";  inherits: true;  initial-value: 0;}@keyframes adjust-pos {  to {    --scroll-position: 100;    --scroll-position-delayed: 100;  }}:root {  animation: adjust-pos 3s linear both;  animation-timeline: scroll();}body{  transition: --scroll-position-delayed 0.15s linear;  --scroll-velocity: calc(var(--scroll-position) - var(--scroll-position-delayed));  --scroll-speed: max(var(--scroll-velocity), -1 * var(--scroll-velocity));  --scroll-direction: calc(var(--scroll-velocity) / var(--scroll-speed));  --scroll-dynamic: calc(var(--scroll-velocity) / var(--scroll-velocity));}

其實(shí)原理還是比較好理解的，下面總結(jié)一下：

首先用CSS自定義變量--scroll-position實(shí)現(xiàn)一個(gè)從0到100的動(dòng)畫，注意需要用@property注冊(cè)。
然后用CSS滾動(dòng)驅(qū)動(dòng)動(dòng)畫將其關(guān)聯(lián)，實(shí)現(xiàn)在滾動(dòng)的時(shí)候變量自動(dòng)變化。
接著再定義一個(gè)相同動(dòng)畫的變量--scroll-position-delayed，并設(shè)置過渡時(shí)間，這樣就會(huì)比--scroll-position變化的慢一點(diǎn)。
將這兩個(gè)變量相減可以得到差值--scroll-velocity。
通過這個(gè)差值--scroll-velocity就能獲得各種狀態(tài)了。
當(dāng)--scroll-velocity為0時(shí)，表示滾動(dòng)停止，否則表示正在滾動(dòng)中。
當(dāng)--scroll-velocity大于0時(shí)，表示滾動(dòng)方向?yàn)橄隆?/li>
當(dāng)--scroll-velocity小于0時(shí)，表示滾動(dòng)方向?yàn)樯稀?/li>
還可以從--scroll-velocity的絕對(duì)值上考慮，絕對(duì)值越大，表示滾動(dòng)速度越快，反之則越慢。
可以通過樣式查詢來匹配各種條件，不過需要用@property注冊(cè)。
通過 CSS calc 和 max計(jì)算可以得到更多狀態(tài)，比如滾動(dòng)方向。
然后就是實(shí)際的運(yùn)用了。

本文鏈接：http://m.www897cc.com/showinfo-26-96976-0.html純 CSS 檢測(cè)滾動(dòng)的速度和方向

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇：我們一起聊聊如何通過流式渲染提升用戶體驗(yàn)？

下一篇：精選：15款頂尖Python知識(shí)圖譜（關(guān)系網(wǎng)絡(luò)）繪制工具，數(shù)據(jù)分析的強(qiáng)力助手

標(biāo)簽：

熱門焦點(diǎn)

Redmi Pad評(píng)測(cè)：紅米充滿野心的一次嘗試

從Note系列到K系列，從藍(lán)牙耳機(jī)到筆記本電腦，紅米不知不覺之間也已經(jīng)形成了自己頗有競(jìng)爭(zhēng)力的產(chǎn)品體系，在中端和次旗艦市場(chǎng)上甚至要比小米新機(jī)的表現(xiàn)來得更好，正所謂“大丈夫生居
石頭智能洗地機(jī)A10 Plus體驗(yàn)：雙向自清潔治好了我的懶癌

一、前言和介紹專為家庭請(qǐng)假懶人而生的石頭科技在近日又帶來了自己的全新旗艦新品，石頭智能洗地機(jī)A10 Plus。從這個(gè)產(chǎn)品名上就不難看出，這次石頭推出的并不是常見的掃地機(jī)器
帥氣純真少年！日本最帥初中生選美冠軍出爐

日本第一帥哥初一生選美大賽冠軍現(xiàn)已正式出爐，冠軍是來自千葉縣的宗田悠良。日本一直熱衷于各種選美大賽，從“最美JK”起到“最美女星&r
十個(gè)可以手動(dòng)編寫的 JavaScript 數(shù)組 API

JavaScript 中有很多API，使用得當(dāng)，會(huì)很方便，省力不少。你知道它的原理嗎? 今天這篇文章，我們將對(duì)它們進(jìn)行一次小總結(jié)。現(xiàn)在開始吧。1.forEach()forEach()用于遍歷數(shù)組接收一參
谷歌KDD'23工作：如何提升推薦系統(tǒng)Ranking模型訓(xùn)練穩(wěn)定性

谷歌在KDD 2023發(fā)表了一篇工作，探索了推薦系統(tǒng)ranking模型的訓(xùn)練穩(wěn)定性問題，分析了造成訓(xùn)練穩(wěn)定性存在問題的潛在原因，以及現(xiàn)有的一些提升模型穩(wěn)定性方法的不足，并提出了一種新
認(rèn)真聊聊東方甄選：如何告別低垂的果實(shí)

來源：山核桃作者：財(cái)經(jīng)無忌爆火一年后，俞敏洪和他的東方甄選依舊是頗受外界關(guān)心的“網(wǎng)紅”。7月5日至9日，為期5天的東方甄選“甘肅行”首次在自有App內(nèi)直播，
微博大門常打開，迎接海外畫師漂洋東渡

作者:互聯(lián)網(wǎng)那些事“起猛了，我能看得懂日語了”。“為什么日本人說話我能聽懂？”“中文不像中文，日語不像日語，但是我竟然看懂了”…&hell
“買真退假” 這種“羊毛”不能薅

□ 法治日?qǐng)?bào) 記者王春　　□ 本報(bào)通訊員胡佳麗　　2020年初，還在上大學(xué)的小東加入了一個(gè)大學(xué)生兼職QQ群。群主“七王”在群里介紹一些刷單賺
外交部：美方應(yīng)停止在網(wǎng)絡(luò)安全問題上不負(fù)責(zé)任地指責(zé)他國

　中國外交部今天（16日）舉行例行記者會(huì)。會(huì)上，有記者問，美國情報(bào)官員稱，他們正在阻攔來自中國以及其他國家的黑客獲取相關(guān)科研成果。中方對(duì)此有何評(píng)論？對(duì)此

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

純 CSS 檢測(cè)滾動(dòng)的速度和方向

一、CSS 檢測(cè)原理

二、CSS 樣式查詢

三、CSS 變量計(jì)算

四、更多有趣的案例

五、最后總結(jié)一下

Redmi Pad評(píng)測(cè)：紅米充滿野心的一次嘗試

石頭智能洗地機(jī)A10 Plus體驗(yàn)：雙向自清潔治好了我的懶癌

帥氣純真少年！日本最帥初中生選美冠軍出爐

十個(gè)可以手動(dòng)編寫的 JavaScript 數(shù)組 API

谷歌KDD'23工作：如何提升推薦系統(tǒng)Ranking模型訓(xùn)練穩(wěn)定性

認(rèn)真聊聊東方甄選：如何告別低垂的果實(shí)

微博大門常打開，迎接海外畫師漂洋東渡

“買真退假” 這種“羊毛”不能薅

外交部：美方應(yīng)停止在網(wǎng)絡(luò)安全問題上不負(fù)責(zé)任地指責(zé)他國

最新推薦

猜你喜歡

熱門推薦

相關(guān)資訊