7月安卓手機好評榜：三星S23Ultra好評率第一
性能榜和性價比榜之后，我們來看最后的安卓手機好評榜，數據來源安兔兔評測，收集時間2023年7月1日至7月31日，僅限國內市場。第一名：三星Galaxy S23 Ultra好評率：95.71%在即將迎來新
CSS可以做的事情越來越越多了。
我們經常會碰到這樣的場景，很多網頁會在右下角放一個固定入口，有可能是返回頂部，有可能廣告，為了避免干擾，在頁面滾動時，會把這些入口臨時收起來，停止滾動后再出現，就像這樣
圖片
通常我們實現這樣的效果會借助JS的定時器，并且監聽頁面滾動，其實也不復雜，大概是這樣實現
let timer;window.addEventListener('scroll', function(){ // 是否在滾動 isScroll = true timer && clearTimeout(timer) timer = setTimeout(() => { isScroll = false }, 150)})現如今，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檢測滾動的進度，該如何做呢？沒錯，就是用 CSS變量。
假設有一個這樣的動畫，--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計數器，直接用偽元素顯示CSS變量值；
具體實現如下：
: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);}現在效果如下：
圖片
現在數字直接從0變到了100，沒有中間的過程。
這是因為--scroll-position是一個自定義變量，無法直接過渡。為了使這個變量也能像普通的過渡屬性自動過渡，需要用到CSS @property，也就是需要注冊這個變量，讓瀏覽器認為這是一個合法的 CSS 變量。
@property --scroll-position { syntax: "<number>"; inherits: true; initial-value: 0;}這段代碼表示--scroll-position是一個number類型的數據，是一個合法的，可以過渡的類型，自然也就有動畫了，效果如下：
圖片
然后我們加上滾動驅動動畫，讓這個動畫跟隨頁面滾動。
:root { animation: adjust-pos 3s linear both; animation-timeline: scroll();}效果如下，這樣就能檢測到滾動的具體位置了。
圖片
當然，僅僅這樣還是不夠的，我們只知道了滾動的進度，并不知道滾動的狀態。
為了知道滾動的速度，我們還需要另一個變量，假設是--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來實現。
body{ margin: 0; transition: --scroll-position-delayed 0.15s linear;}這里的0.15s表示--scroll-position-delayed在變化時需要0.15s的時間，而--scroll-position是瞬時完成的，所以就相當于--scroll-position-delayed始終比--scroll-position慢了0.15秒，也就相當于延時了0.15s，實際效果如下：
圖片
是不是可以很清楚的看到下面的數值要比上面的慢一點？
有了這個時間差，我們就可以判斷當前的滾動狀態了。
比如我們可以用一個變量--scroll-velocity來表示兩者的差值。
body{ --scroll-velocity: calc(var(--scroll-position) - var(--scroll-position-delayed));}效果如下：
圖片
通過這個差值，我們是不是就能發現一些規律？
這就是CSS檢測的原理了，是不是還算簡單呢？不過這還沒完，還需要具體實現，比如怎么根據這個變量來匹配對應的樣式。
回到文章開頭，我們如何檢測是否正在滾動呢，并且在滾動的時候隱藏右下角懸浮按鈕呢？下面就來實現這樣一個功能。
既然當--scroll-velocity為0時，就表示滾動停止，那我們是不是可以直接用樣式查詢來匹配呢？
@container - CSS: Cascading Style Sheets | MDN (mozilla.org)[1]
CSS 樣式查詢是容器查詢的一部分，從名稱也可以看出，它可以查詢元素的樣式，進而設置額外的樣式。比如默認是隱藏的。
.back{ transform: translateX(100%); transition: .2s;}當匹配到--scroll-velocity:0時，顯示這個懸浮按鈕，就可以這樣來實現。
@container style(--scroll-velocity: 0) { .back{ transform: translateX(0); }}效果如下：
圖片
好像并沒有起效果？其實和前面的動畫原理差不多，這是一個CSS自定義變量，無法直接檢測到變化的值。這里有一個解決方案，為了保證能夠樣式查詢到，需要用@property注冊一下：
@property --scroll-velocity { syntax: "<number>"; inherits: true; initial-value: 0;}這樣就能完美檢測了。
你也可以訪問線上鏈接來查看實際效果。
是不是非常簡單？
除了使用樣式查詢外，我們還可以用CSS變量的計算方式來實現。
什么意思呢？比如我們想知道是否在滾動，其實就是兩個狀態，那能不能用0和1來表示是否在滾動呢？那就需要做一點點變換了。
現在--scroll-velocity表示差值，范圍可能是-50~50，那如何轉換成1~0呢，很簡單，直接除以自身就行了, 比如-50/-50和50/50結果都是1，有人會奇怪0/0會不會無限大，沒關系，這里CSS計算的結果還是0，實現如下：
body{ --scroll-velocity: calc(var(--scroll-position) - var(--scroll-position-delayed)); --scroll-dynamic: calc(var(--scroll-velocity) / var(--scroll-velocity));}這樣的話，我們就無需樣式查詢來改變右下角懸浮按鈕的狀態了，直接用--scroll-dynamic來控制transform
.back{ transform: translateX(calc(var(--scroll-dynamic) * 100%));}看看效果：
圖片
不一樣的實現也能得到相同的效果，你也可以訪問線上鏈接來查看實際效果。
除了可以得到是否在滾動，還能計算得到滾動方向，比如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));}看似有點復雜，其實也不難理解。比如當前差值是-30，那么，我們可以通過乘以-1，然后取兩者較大值，這樣就能得到絕對值了。
圖片
上面其實是個“偏方”，關于絕對值，其實已經有CSS abs()了，只是現在還沒有支持，相信以后就能用上了。
然后用原值除以這個絕對值，就能得到1或者-1了。
利用這個特性，我們可以在不同的方向改變箭頭的指向。
.back{ transform: scaleY(var(--scroll-direction));}效果如下：
圖片
你也可以訪問線上鏈接來查看實際效果：
除了上面幾個應用，我還找了幾個有趣的案例。
比如下面這種蟲洞效果，在水平或者垂直方向滾動時，會有明顯的透視效果https://codepen.io/bramus/pen/wvRqVBm
圖片
再比如這種上下滾動，可以看到不同方向上內容的傾斜角度不一樣，而且滾動越快，傾斜越大：https://codepen.io/bramus/pen/OJrxBaL
還有一個比較簡單實用的運動模糊滾動，也就是在滾動時，頁面會有模糊的效果：https://codepen.io/bramus/pen/XWoREjv
說了這么多，核心原理其實就這么幾行，如下：
@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));}其實原理還是比較好理解的，下面總結一下：
本文鏈接：http://www.www897cc.com/showinfo-26-96976-0.html純 CSS 檢測滾動的速度和方向
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號