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

純 CSS 檢測滾動的速度和方向

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

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

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

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

圖片

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

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

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

一、CSS 檢測原理

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

比如，我們有這樣一個可以滾動的頁面；

<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>

簡單修飾一下，效果是這樣的；

圖片

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

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

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

為了方便演示，我們可以把這個動畫的變化過程顯示在頁面上；

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

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

具體實現(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，沒有中間的過程。

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

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

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

圖片

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

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

效果如下，這樣就能檢測到滾動的具體位置了。

圖片

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

為了知道滾動的速度，我們還需要另一個變量，假設(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;  }}

這樣就有了兩個變量在同時變化，效果如下：

圖片

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

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

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

圖片

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

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

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

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

效果如下：

圖片

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

當(dāng)--scroll-velocity為0時，表示滾動停止，否則表示正在滾動中。
當(dāng)--scroll-velocity大于0時，表示滾動方向為下。
當(dāng)--scroll-velocity小于0時，表示滾動方向為上。
還可以從--scroll-velocity的絕對值上考慮，絕對值越大，表示滾動速度越快，反之則越慢。

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

二、CSS 樣式查詢

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

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

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

CSS 樣式查詢是容器查詢的一部分，從名稱也可以看出，它可以查詢元素的樣式，進(jìn)而設(shè)置額外的樣式。比如默認(rèn)是隱藏的。

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

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

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

效果如下：

圖片

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

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

這樣就能完美檢測了。

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

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

是不是非常簡單？

三、CSS 變量計算

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

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

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

看看效果：

圖片

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

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

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

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));}

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

圖片

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

然后用原值除以這個絕對值，就能得到1或者-1了。

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

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

效果如下：

圖片

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

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

四、更多有趣的案例

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

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

圖片

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

還有一個比較簡單實用的運動模糊滾動，也就是在滾動時，頁面會有模糊的效果：https://codepen.io/bramus/pen/XWoREjv

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

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

@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));}

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

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

本文鏈接：http://www.tebozhan.com/showinfo-26-96976-0.html純 CSS 檢測滾動的速度和方向

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

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

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

標(biāo)簽：

熱門焦點

Rust中的高吞吐量流處理

作者 | Noz編譯 | 王瑞平本篇文章主要介紹了Rust中流處理的概念、方法和優(yōu)化。作者不僅介紹了流處理的基本概念以及Rust中常用的流處理庫，還使用這些庫實現(xiàn)了一個流處理程序
使用AIGC工具提升安全工作效率

在日常工作中，安全人員可能會涉及各種各樣的安全任務(wù)，包括但不限于：開發(fā)某些安全工具的插件，滿足自己特定的安全需求；自定義github搜索工具，快速查找所需的安全資料、漏洞poc、exp
花7萬退貨退款無門：誰在縱容淘寶珠寶商家造假？

來源：極點商業(yè)作者：楊銘在淘寶購買珠寶玉石后，因為保證金不夠賠付，店鋪關(guān)閉，退貨退款難、維權(quán)無門的比比皆是。“提供相關(guān)產(chǎn)品鑒定證書，支持全國復(fù)檢，可以30天無理由退換貨。&
阿里瓴羊One推出背后，零售企業(yè)迎數(shù)字化新解

作者:劉曠近年來隨著數(shù)字經(jīng)濟的高速發(fā)展，各式各樣的SaaS應(yīng)用服務(wù)更是層出不窮，但本質(zhì)上SaaS大多局限于單一業(yè)務(wù)流層面，對用戶核心關(guān)切的增長問題等則沒有提供更好的解法。在Saa
郭明錤稱華為和江淮汽車合作開發(fā)問界MPV，定價100萬左右、計劃明年量產(chǎn)

8 月 1 日消息，郭明錤今天在 Medium 平臺發(fā)布博文，稱華為正在和江淮汽車合作，開發(fā)售價在 100 萬元的問界 MPV，預(yù)計在 2024 年第 2 季度量產(chǎn)，銷量目標(biāo)為
OPPO K11搭載長壽版100W超級閃充：26分鐘充滿100%

據(jù)此前官方宣布，OPPO將于7月25日也就是今天下午14:30舉辦新品發(fā)布會，屆時全新的OPPO K11將正式與大家見面，將主打旗艦影像，和同檔位競品相比，其最大的賣
機構(gòu)稱Q2全球智能手機出貨量同比下滑11% 蘋果份額依舊第2

7月20日消息，據(jù)外媒報道，研究機構(gòu)的報告顯示，由于需求下滑，今年二季度全球智能手機的出貨量，同比下滑了11%，三星、蘋果等主要廠商的銷量，較去年同期均有下
聯(lián)想小新Pad Pro 12.6將要推出，搭載高通驍龍 870 處理器

聯(lián)想小新Pad Pro 12.6將于秋季新品會上推出，官方按照慣例直接在發(fā)布會前給出了機型的所有參數(shù)。聯(lián)想小新 Pad Pro 12.6 將搭載高通驍龍 870 處理器，重量為 5
電博會上海爾智家模擬500平大平層，還原生活空間沉浸式體驗

電博會為了更好地讓參展觀眾真正感受到智能家居的絕妙之處，海爾智家的程傳嶺先生同樣介紹了展會上海爾智家的模擬500平大平層，還原生活空間沉浸式體驗。程傳

AVt天堂网手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

純 CSS 檢測滾動的速度和方向

一、CSS 檢測原理

二、CSS 樣式查詢

三、CSS 變量計算

四、更多有趣的案例

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

Rust中的高吞吐量流處理

使用AIGC工具提升安全工作效率

花7萬退貨退款無門：誰在縱容淘寶珠寶商家造假？

阿里瓴羊One推出背后，零售企業(yè)迎數(shù)字化新解

郭明錤稱華為和江淮汽車合作開發(fā)問界MPV，定價100萬左右、計劃明年量產(chǎn)

OPPO K11搭載長壽版100W超級閃充：26分鐘充滿100%

機構(gòu)稱Q2全球智能手機出貨量同比下滑11% 蘋果份額依舊第2

聯(lián)想小新Pad Pro 12.6將要推出，搭載高通驍龍 870 處理器

電博會上海爾智家模擬500平大平層，還原生活空間沉浸式體驗

最新推薦

猜你喜歡

熱門推薦

相關(guān)資訊