CSS 滾動驅動動畫實現圓弧滾動條

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

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

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

這是如何實現的呢？

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

一、SVG 路徑動畫

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

具體如何實現呢？

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

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

然后導出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動起來呢？

很簡單，現在SVG是一段實線，我們可以通過stroke-dasharray設置成虛線，比如

path{
  stroke-dasharray: 80
}

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

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

path{
  stroke-dasharray: 80 120
}

效果如下

所以，這種寫法其實相當于把當前的值無限重復，示意如下

當然，我們這里不需要設置的這么復雜，只需要一小段實線就夠了，所以是實現加上一段足夠長的虛線（超過路徑本身就行），實現如下

path{
  stroke-dasharray: 80 1000
}

這樣就得到了一小段實線

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

比如，我們

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

效果如下

是不是有點像呢？

我們再調整一下起始偏移量，讓它出去一點

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

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

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

二、CSS 滾動驅動動畫

接下來需要通過滾動驅動動畫將容器滾動與CSS動畫「聯動」起來。

關于CSS 滾動驅動可以參考我之前寫的這篇文章：CSS 滾動驅動動畫終于正式支持了~

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

先簡單布局一下

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

美化一下

然后，我們將默認的滾動條隱藏，用我們這個 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>

相關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;
}

這樣結構就搭好了，只是滾動條會自動播放

接下來就是最關鍵的一步，加上滾動驅動動畫

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

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

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

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

三、CSS 滾動吸附

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

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

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

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

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

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

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

效果如下

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

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

這樣就實現了文章開頭的效果了

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

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

四、總結一下

總的來說，CSS滾動驅動在滾動交互上帶來了無限可能，很多以前必須借助 JS來實現的都可以輕易實現，下面總結一下

從本質上來講，右側的滾動條其實是一個 SVG 路徑動畫
SVG路徑可以通過stroke-dasharray設置虛實間隔
當虛線間隔足夠長時，超過路徑本身，就能得到一小塊實線
通過改變stroke-dashoffset偏移能夠實現路徑描邊動畫
借助 CSS滾動驅動動畫可以將SVG路徑動畫跟隨容器滾動而運動
滾動回彈效果其實就是CSS scroll snap實現的

作者:XboxYan

來源:微信公眾號:前端偵探

出處:https://mp.weixin.qq.com/s/GaakgWhXm6jpY4PfISNHZQ

order 盒子邊框

復合屬性。設置對象邊框的特性。
盒子邊框三要素：
① 邊框粗細
② 邊框樣式
③ 邊框顏色

語法：border: border-width | border-style | border-color ;

邊框四邊的粗細、樣式、顏色，以及上下左右每個位置的樣式屬性都是可以單獨調整的。

邊框的顏色不是必要的，如果不指定顏色，默認顏色為黑色，但必須為盒子指定寬高。

初始 HTML

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         div{
             width: 500px;
             height: 50px;
         }
     </style>
 </head>
 <body>
     <div></div>
 </body>
 </html>

邊框樣式

使用 border-style 可為盒子邊框設置樣式，以下示例為實線

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid; 
 }

效果：

可單獨針對某一方向設置邊框樣式

示例 CSS 代碼

上邊：border-top-style: double; （雙線）
右邊：border-right-style: solid; (實線)
下邊：border-bottom-style: dashed; (虛線)
左邊：border-left-style: dotted; (點線)

border-style 說明

如果提供全部四個參數值，將按上、右、下、左的順序作用于四邊。
如果只提供一個，將用于全部的四邊。
如果提供兩個，第一個用于上、下，第二個用于左、右。
如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。
如果border-width等于0，本屬性將失去作用。

如果需要設置不同方向的樣式屬性，可以寫在一句 CSS 代碼里，比如說下面這段代碼，上下實線，左右虛線。

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid dashed;
 }

效果：

border-style 樣式屬性值

屬性值解釋none無輪廓。 border-color將被忽略，border-width計算值為0，除非邊框輪廓為圖像，即border-image。hidden隱藏邊框。IE7及以下尚不支持dotted點狀輪廓。IE6下顯示為dashed效果dashed虛線輪廓solid實線輪廓double雙線輪廓。兩條單線與其間隔的和等于指定的border-width值groove3D凹槽輪廓ridge3D凸槽輪廓inset3D凹邊輪廓outset3D凸邊輪廓

邊框粗細

使用 border-width 可為盒子邊框設置粗細，以下示例邊框為 5px 粗細

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width: 5px;
 }

效果

可單獨針對某一方向設置邊框粗細

示例 CSS 代碼

上邊：border-top-width: 10px; （雙線）
右邊：border-right-width: 10px; (實線)
下邊：border-bottom-width: 10px; (虛線)
左邊：border-left-width: 10px; (點線)

border-width 說明

如果提供全部四個參數值，將按上、右、下、左的順序作用于四邊。
如果只提供一個，將用于全部的四邊。
如果提供兩個，第一個用于上、下，第二個用于左、右。
如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。
如果border-style設置為none或hidden，border-width的使用值將為0。

如果需要設置不同方向的邊框粗細，可以寫在一句 CSS 代碼里。

比如說下面這段代碼，上下2px，右2px，左5px。

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width:2px 2px 2px 5px;
 }

效果：

邊框顏色

可直接輸入
顏色的英文名稱
rgb值
十六進制

使用 border-color 可為盒子邊框設置顏色，以下示例邊框顏色為紅色。

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width:2px 2px 2px 5px;
     border-color: red;
 }

效果：

可單獨針對某一方向設置邊框顏色

示例 CSS 代碼

上邊：border-top-color: 10px;
右邊：border-right-color: 10px;
下邊：border-bottom-color: 10px;
左邊：border-left-color: 10px;

border-color 說明

如果提供全部四個參數值，將按上、右、下、左的順序作用于四邊。
如果只提供一個，將用于全部的四邊。
如果提供兩個，第一個用于上、下，第二個用于左、右。
如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。
如果border-width等于0或border-style設置為none，本屬性將被忽略。

上面有兩個示例講述如何設置不同方向的屬性，border-color 也是相同使用方法，此處就不做示例了。

border 是復合屬性

如果你需要同時設置盒子的粗細、樣式、顏色，那么你可以將他們的樣式表寫在同一行代碼里。

例如：

 /* CSS代碼 */
 div{
     border-top: 5px solid red;
 }

這段代碼指定了上邊框的三個屬性：粗細、樣式、顏色

border-top 包含了：

border-top-width: 5px;
border-top-style: solid;
border-top-color: red;

其他同理

教你用 CSS 畫個三角形

先來看一個示例

 /* CSS代碼 */
 div{
     width: 100px;
     height: 100px;
     border-top: 50px solid red;
     border-right: 50px solid blue;
     border-bottom: 50px solid green;
     border-left: 50px solid pink;
 }

效果：

細心的你，一定發現了 border 的邊框四條邊交接處是斜角。

此刻我們把盒子的寬高設置為 0

 /* CSS代碼 */
 div{
     width: 0;
     height: 0;
     border-top: 50px solid red;
     border-right: 50px solid blue;
     border-bottom: 50px solid green;
     border-left: 50px solid pink;
 }

效果：

是不是完完全全像四個三角形一樣。

我們只需要把上邊和左右兩邊的三角形隱藏起來，它不就是一個三角形了。

為 border-color 指定 transparent 值，使盒子邊框顏色變透明

 /* CSS代碼 */
 div{
     width: 0;
     height: 0;
     border-top: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid green;
     border-left: 50px solid transparent;
 }

效果：

把另外三條邊透明之后，就只剩一個三角形了。

完

部分資料引用自：

http://caibaojian.com/css3/properties/border/index.htm

用Vue特性與Cavnas的API繪制簡易時鐘

模塊作用域、computed的靈活運用，以及CSS的border邊框處理。

實例代碼

從template，到css，再到詳細的js邏輯代碼。

html

里面放置一個canvas，我們假設寬高都是200px，則：

css

這里主要是利用了css天然的dashed虛線邊框來模擬時鐘的刻度。

至此效果如下：

data

這里使用一個date的data來控制變化，從而自動觸發與之相關的computed字段，并在computed里面觸發繪制函數。

computed

這里需要注意，最好像上面那樣提供一個result變量，傳給函數用，否則就可能在函數里面再次調用this.time，那這樣就死循環了。

methods

上面注意兩點：

如果有些變量或DOM，只會獲取一次，并且與$vue實例無關，那么可以考慮放在模塊變量中，不用什么都綁定在data上，算是一種分工優化。
canvas的save與restore在這里使用是非常重要的東西。

其他就是常規的代碼計算與邏輯。

無外乎，mounted時候主動觸發一個this.date的值，并且后面每秒獲取一次，這樣就可以觸發this.date這個computed，于是有觸發繪制函數drawCanvas，一條線下來，相當于純自動，感覺還是很棒的。

最終效果

在線咨詢

上一篇：零基礎學習java開發到做項目要多久？學習周期有多長？
下一篇：設計更快的網頁（三）：字體和 CSS 調整

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS 滾動驅動動畫實現圓弧滾動條

一、SVG 路徑動畫

二、CSS 滾動驅動動畫

三、CSS 滾動吸附

四、總結一下

初始 HTML

邊框樣式

可單獨針對某一方向設置邊框樣式

border-style 說明

border-style 樣式屬性值

邊框粗細

可單獨針對某一方向設置邊框粗細

border-width 說明

邊框顏色

可單獨針對某一方向設置邊框顏色

border-color 說明

border 是復合屬性

教你用 CSS 畫個三角形

用Vue特性與Cavnas的API繪制簡易時鐘

您的項目需求