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

CSS 滾動驅(qū)動動畫實現(xiàn)圓弧滾動條

來源：責(zé)編：時間：2024-01-22 17:25:38 241觀看

導(dǎo)讀前不久看到這樣一個很有趣的效果，它的滾動條是沿著圓角邊緣滾動的，效果如下你可以查看原鏈接來體驗一下https://codepen.io/jh3y/pen/gOEgxbd。
這是如何實現(xiàn)的呢？原效果中由于為了兼容不支持CSS滾動驅(qū)動的瀏覽器，特意用

前不久看到這樣一個很有趣的效果，它的滾動條是沿著圓角邊緣滾動的，效果如下

你可以查看原鏈接來體驗一下

https://codepen.io/jh3y/pen/gOEgxbd。

這是如何實現(xiàn)的呢？

原效果中由于為了兼容不支持CSS滾動驅(qū)動的瀏覽器，特意用 JS做了兼容，所以看著比較復(fù)雜，其實核心非常簡單，下面我將用最簡短的 CSS 來復(fù)刻這一效果，一起看看吧！

一、SVG 路徑動畫

從本質(zhì)上來講，其實是一個 SVG 路徑動畫。

具體如何實現(xiàn)呢？

首先，我們通過設(shè)計軟件繪制一個這樣的路徑。

注意設(shè)置描邊的大小還有端點的類型，比如下面是round效果。

然后導(dǎo)出SVG，可以得到這樣一段代碼。

<svg viewBox="0 0 31 433" fill="none" xmlns="http://www.w3.org/2000/svg">  <path d="M4 4C9.96737 4 15.6903 6.37053 19.9099 10.5901C24.1295 14.8097 26.5 20.5326 26.5 26.5V406.5C26.5 412.467 24.1295 418.19 19.9099 422.41C15.6903 426.629 9.96737 429 4 429" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/></svg>

然后，如何讓這段SVG動起來呢？

很簡單，現(xiàn)在SVG是一段實線，我們可以通過stroke-dasharray設(shè)置成虛線，比如：

path{  stroke-dasharray: 80}

這樣會得到一個實線和虛線間隔都是80的虛線。

如果希望虛線空白的地方更大一點，該怎么設(shè)置呢?很簡單，繼續(xù)往后加。

path{  stroke-dasharray: 80 120}

效果如下：

所以，這種寫法其實相當(dāng)于把當(dāng)前的值無限重復(fù)，示意如下：

當(dāng)然，我們這里不需要設(shè)置的這么復(fù)雜，只需要一小段實線就夠了，所以是實現(xiàn)加上一段足夠長的虛線（超過路徑本身就行），實現(xiàn)如下：

path{  stroke-dasharray: 80 1000}

這樣就得到了一小段實線。

那么，如何讓他動起來呢？很簡單，改變一下偏移就可以，這個可以用stroke-dashoffset來實現(xiàn)。

比如：

@keyframes scroll {  to {    stroke-dashoffset: -370	}}path{  stroke-dasharray: 80 1000;  animation: scroll 3s alternate-reverse infinite;}

效果如下：

是不是有點像呢？

我們再調(diào)整一下起始偏移量，讓它出去一點。

@keyframes scroll {  0% { stroke-dashoffset: 75; }  100% { stroke-dashoffset: -445; }}

這樣就更接近我們想要的效果了。

整個運動原理就是這樣了，接著往下看

二、CSS 滾動驅(qū)動動畫

接下來需要通過滾動驅(qū)動動畫將容器滾動與CSS動畫「聯(lián)動」起來。

簡單來講，「CSS 滾動驅(qū)動動畫」指的是將「動畫的執(zhí)行過程由頁面滾動」進(jìn)行接管，也就是這種情況下，「動畫只會跟隨頁面滾動的變化而變化」，也就是滾動多少，動畫就執(zhí)行多少，「時間不再起作用」。

先簡單布局一下：

<div class="list">  <div class="item" id="item_1">1</div>  <div class="item" id="item_2">2</div>  <div class="item" id="item_3">3</div>  <div class="item" id="item_4">4</div>  <div class="item" id="item_5">5</div>  <div class="item" id="item_6">6</div>  <div class="item" id="item_7">7</div></div>

美化一下：

然后，我們將默認(rèn)的滾動條隱藏，用我們這個 SVG路徑來代替，由于需要絕對定位，我們再套一層父級。

<div class="wrap">  <div class="list">    <div class="item" id="item_1">1</div>    <div class="item" id="item_2">2</div>    <div class="item" id="item_3">3</div>    <div class="item" id="item_4">4</div>    <div class="item" id="item_5">5</div>    <div class="item" id="item_6">6</div>    <div class="item" id="item_7">7</div>    <!--滾動條-->    <svg class="scroller" viewBox="0 0 31 433" fill="none" xmlns="http://www.w3.org/2000/svg">      <path class="scroller_thumb" d="M4 4C9.96737 4 15.6903 6.37053 19.9099 10.5901C24.1295 14.8097 26.5 20.5326 26.5 26.5V406.5C26.5 412.467 24.1295 418.19 19.9099 422.41C15.6903 426.629 9.96737 429 4 429" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>    </svg>  </div></div>

相關(guān)CSS如下：

.wrap{  position: relative;}.scroller {  position: absolute;  top: 0;  bottom: 0;  right: 0;  pointer-events: none;  height: -webkit-fill-available;  margin: 5px;}.scroller_thumb{  stroke: hsl(0 0% 100% / 0.5);  stroke-dasharray: 80 450;  stroke-width: 8px;  animation: scroll both 5s linear;}

這樣結(jié)構(gòu)就搭好了，只是滾動條會自動播放。

接下來就是最關(guān)鍵的一步，加上滾動驅(qū)動動畫。

.scroller_thumb{  animation: scroll both 5s linear;  animation-timeline: scroll();}

但是這樣是不起作用的，直接使用scroll()會自動尋找它的相對父級，也就是.wrap，但實際滾動的其實是.list，所以這種情況下我們需要具名的滾動時間線，實現(xiàn)如下：

.list{  scroll-timeline: --scroller;}.scroller_thumb{  animation: scroll both 5s linear;  animation-timeline: --scroller;}

這樣SVG路徑動畫就能跟隨容器滾動而運動了。

三、CSS 滾動吸附

原效果中還有一個滾動回彈的效果，當(dāng)滾動到容器邊緣時，會自動回彈到起始位置。

其實只需要用到 CSS scroll snap 就可以了。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type。

實現(xiàn)很簡單，給滾動容器添加scroll-snap-type屬性，表示這是個允許滾動吸附的容器。

.list{  scroll-snap-type: y mandatory;}

然后就指定需要吸附的點了，由于需要回彈的效果，所以滾動容器的首尾需要一個空白的容器，這里直接用兩個偽元素來生成

.list::before,.list::after{  content: '';  height: 50px;  flex-shrink: 0;}

效果如下：

然后我們設(shè)置滾動吸附點就行了，設(shè)置第一個元素頂部和最后一個元素底部，其他元素居中就行了。

.item{  scroll-snap-align: center;}.item:first-child{  scroll-snap-align: start;}/*最后一個元素是 SVG，所以這里用倒數(shù)第二個元素*/.item:nth-last-child(2){  scroll-snap-align: end;}

這樣就實現(xiàn)了文章開頭的效果了。

完整代碼可以查看以下鏈接（無任何 JS）

CSS round scroll (juejin.cn)[1]
CSS round scroll (codepen.io)[2]

四、總結(jié)一下

總的來說，CSS滾動驅(qū)動在滾動交互上帶來了無限可能，很多以前必須借助 JS來實現(xiàn)的都可以輕易實現(xiàn)，下面總結(jié)一下。

從本質(zhì)上來講，右側(cè)的滾動條其實是一個 SVG 路徑動畫。
SVG路徑可以通過stroke-dasharray設(shè)置虛實間隔。
當(dāng)虛線間隔足夠長時，超過路徑本身，就能得到一小塊實線。
通過改變stroke-dashoffset偏移能夠?qū)崿F(xiàn)路徑描邊動畫。
借助 CSS滾動驅(qū)動動畫可以將SVG路徑動畫跟隨容器滾動而運動。
滾動回彈效果其實就是CSS scroll snap實現(xiàn)的。

[1]CSS round scroll (juejin.cn)： https://code.juejin.cn/pen/7326425332964130856。

[2]CSS round scroll (codepen.io)： https://codepen.io/xboxyan/pen/WNmjZLo。

本文鏈接：http://www.www897cc.com/showinfo-26-66203-0.htmlCSS 滾動驅(qū)動動畫實現(xiàn)圓弧滾動條

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

上一篇：厲害，美國人又搞了一個壟斷的生態(tài)系統(tǒng)

下一篇：【故障現(xiàn)場】多線程性能優(yōu)化最大的坑，99%人都不自知

標(biāo)簽：

熱門焦點

Redmi Buds 4開箱簡評：才199還有降噪可以無腦入

在上個月舉辦的Redmi Note11T Pro系列新機(jī)發(fā)布會上，除了兩款手機(jī)新品之外，Redmi還帶來了兩款TWS真無線藍(lán)牙耳機(jī)產(chǎn)品，Redmi Buds 4和Redmi Buds 4 Pro，此前我們在Redmi Note11T
如何正確使用:Has和:Nth-Last-Child

我們可以用CSS檢查，以了解一組元素的數(shù)量是否小于或等于一個數(shù)字。例如，一個擁有三個或更多子項的grid。你可能會想，為什么需要這樣做呢？在某些情況下，一個組件或一個布局可能會
微信語音大揭秘：為什么禁止轉(zhuǎn)發(fā)？

大家好，我是你們的小米。今天，我要和大家聊一個有趣的話題：為什么微信語音不可以轉(zhuǎn)發(fā)？這是一個我們經(jīng)常在日常使用中遇到的問題，也是一個讓很多人好奇的問題。讓我們一起來揭開這
馮提莫簽約抖音公會前“斗魚一姐”消失在直播間

來源：直播觀察提起“馮提莫”這個名字，很多網(wǎng)友或許聽過，但應(yīng)該不記得她是哪位主播了。其實，作為曾經(jīng)的“斗魚一姐”，馮提莫在游戲直播的年代影響力不輸于現(xiàn)
蘋果公司要求三星和LG Display生產(chǎn)「無邊框」OLED iPhone顯示屏

據(jù) The Elec 報道，蘋果已要求其供應(yīng)商為未來的 iPhone 型號開發(fā)「無邊框」OLED 顯示面板。蘋果顯然已要求三星和 LG Display 開發(fā)新的 OLED 顯示面
iQOO 11S評測：行業(yè)唯一的200W標(biāo)準(zhǔn)版旗艦

【Techweb評測】去年底，iQOO推出了“電競旗艦”iQOO 11系列，作為一款性能強(qiáng)機(jī)，該機(jī)不僅全球首發(fā)2K 144Hz E6全感屏，搭載了第二代驍龍8平臺及144Hz電競
滴滴違法違規(guī)被罰80.26億共存在16項違法事實

滴滴違法違規(guī)被罰80.26億存在16項違法事實開始于2121年7月，歷經(jīng)一年時間，網(wǎng)絡(luò)安全審查辦公室對“滴滴出行”網(wǎng)絡(luò)安全審查終于有了一個暫時的結(jié)束。據(jù)“網(wǎng)信
聯(lián)想小新Pad Pro 12.6將要推出，搭載高通驍龍 870 處理器

聯(lián)想小新Pad Pro 12.6將于秋季新品會上推出，官方按照慣例直接在發(fā)布會前給出了機(jī)型的所有參數(shù)。聯(lián)想小新 Pad Pro 12.6 將搭載高通驍龍 870 處理器，重量為 5
榮耀Magic4 至臻版首創(chuàng)智慧隱私通話強(qiáng)勁影音系統(tǒng)

2022年第一季度臨近尾聲，在該季度內(nèi)，許多品牌陸續(xù)發(fā)布自己的最新產(chǎn)品，讓大家從全新的角度來了解當(dāng)今的手機(jī)技術(shù)。手機(jī)是電子設(shè)備中，更新迭代十分迅速的一款產(chǎn)品，基

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

CSS 滾動驅(qū)動動畫實現(xiàn)圓弧滾動條

一、SVG 路徑動畫

二、CSS 滾動驅(qū)動動畫

三、CSS 滾動吸附

四、總結(jié)一下

Redmi Buds 4開箱簡評：才199還有降噪可以無腦入

如何正確使用:Has和:Nth-Last-Child

微信語音大揭秘：為什么禁止轉(zhuǎn)發(fā)？

馮提莫簽約抖音公會前“斗魚一姐”消失在直播間

蘋果公司要求三星和LG Display生產(chǎn)「無邊框」OLED iPhone顯示屏

iQOO 11S評測：行業(yè)唯一的200W標(biāo)準(zhǔn)版旗艦

滴滴違法違規(guī)被罰80.26億共存在16項違法事實

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

榮耀Magic4 至臻版首創(chuàng)智慧隱私通話強(qiáng)勁影音系統(tǒng)

最新推薦

猜你喜歡

熱門推薦

相關(guān)資訊