純CSS實(shí)現(xiàn)電梯導(dǎo)航！

作者：XboxYan 2024-08-29 08:13:58

通常要實(shí)現(xiàn)這樣一個(gè)交互肯定少不了JS，常規(guī)的做法是監(jiān)聽滾動(dòng)事件，也可以用IntersectionObserver監(jiān)聽元素的滾動(dòng)位置狀態(tài)。

我們經(jīng)常會(huì)在博客、文檔中看到類似這樣的側(cè)邊導(dǎo)航目錄，例如：

這種導(dǎo)航也被稱為“電梯導(dǎo)航”（當(dāng)然可能還有其他叫法，知道是這個(gè)交互就行）。它會(huì)隨著內(nèi)容的滾動(dòng)而自動(dòng)切換當(dāng)前選中態(tài)，點(diǎn)擊任意目錄也會(huì)自動(dòng)滾動(dòng)到對(duì)應(yīng)標(biāo)題，就像這樣。

通常要實(shí)現(xiàn)這樣一個(gè)交互肯定少不了JS，常規(guī)的做法是監(jiān)聽滾動(dòng)事件，也可以用IntersectionObserver監(jiān)聽元素的滾動(dòng)位置狀態(tài)，下面有一篇關(guān)于用IntersectionObserver的實(shí)現(xiàn)。

嘗試使用JS IntersectionObserver讓標(biāo)題和導(dǎo)航聯(lián)動(dòng)：https://www.zhangxinxu.com/wordpress/2020/12/js-intersectionobserver-nav 。

大家可能也發(fā)現(xiàn)了，這個(gè)交互最大的特點(diǎn)就是滾動(dòng)，是不是也可以聯(lián)想到 CSS滾動(dòng)驅(qū)動(dòng)動(dòng)畫呢？經(jīng)過一番嘗試，發(fā)現(xiàn)純 CSS也能完美實(shí)現(xiàn)，而且實(shí)現(xiàn)更加簡(jiǎn)單（不到10行），下面是我復(fù)刻的效果。

是不是非常神奇？CSS 還能實(shí)現(xiàn)這樣的效果？一起看看吧！

一、CSS 滾動(dòng)錨定

這個(gè)導(dǎo)航主要有兩個(gè)交互：

點(diǎn)擊導(dǎo)航會(huì)自動(dòng)滾動(dòng)到頁面對(duì)應(yīng)位置。
頁面滾動(dòng)會(huì)自動(dòng)切換導(dǎo)航選中態(tài)。

第一條比較容易，我們可以直接用a標(biāo)簽的能力實(shí)現(xiàn)錨定跳轉(zhuǎn)。假設(shè)HTML結(jié)構(gòu)如下：

<nav>
  <a>一、標(biāo)題一</a>
  <a>二、標(biāo)題二</a>
  <a>三、標(biāo)題三</a>
  <a>四、標(biāo)題四</a>
  <a>五、標(biāo)題五</a>
  <a>六、標(biāo)題六</a>
</nav>
<h1>CSS 電梯導(dǎo)航</h1>
<div class="content">
  <h2>一、標(biāo)題一</h2>
  <section>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </section>
</div>
<div class="content">
  <h2>二、標(biāo)題二</h2>
  <section>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </section>
</div>
<div class="content">
  <h2>三、標(biāo)題三</h2>
  <section>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </section>
</div>
<div class="content">
  <h2>四、標(biāo)題四</h2>
  <section>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </section>
</div>
<div class="content">
  <h2>五、標(biāo)題五</h2>
  <section>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </section>
</div>
<div class="content">
  <h2>六、標(biāo)題六</h2>
  <section>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </section>
</div>

然后簡(jiǎn)單修飾一下。

body{
  padding: 0 15px;
}
h2{
  margin: 0;
  padding: .8em 0;
  scroll-margin: 20px;
}
nav{
  position: fixed;
  top: 15px;
  right: 15px;
  background: #fff;
  padding: 10px 0;
  border-radius: 4px;
  overflow: hidden;
}
nav>a{
  position: relative;
  display: block;
  line-height: 2;
  padding: 0 15px;
  font-size: 14px;
  color: #191919;
  text-decoration: none;
}
nav>a:hover{
  background-color: #d5d5d54a;
}
section{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
section span{
  width: 30%;
  height: 100px;
  border-radius: 4px;
  background-color: #E4CCFF;
}

效果如下：

然后我們只需要給a標(biāo)簽添加href屬性，頁面相對(duì)應(yīng)的地方指定相同的id，就像這樣。

<nav>
  <a href="#t1">一、標(biāo)題一</a>
  <a href="#t2">二、標(biāo)題二</a>
	...
</nav>
<div class="content">
  <h2 id="t1">一、標(biāo)題一</h2>
  <section>
    ...
  </section>
</div>
<div class="content">
  <h2 id="t2">二、標(biāo)題二</h2>
  <section>
    ...
  </section>
</div>

這樣點(diǎn)擊a標(biāo)簽會(huì)自動(dòng)錨點(diǎn)到對(duì)應(yīng)位置，效果如下：

這樣就能跳轉(zhuǎn)了，如果你覺得有點(diǎn)生硬，可以加入滾動(dòng)動(dòng)畫。

body{
  /**/
  scroll-behavior: smooth;
}

這樣就平滑多了。

這樣就實(shí)現(xiàn)了滾動(dòng)錨定效果，還算比較容易。

下面來看如何實(shí)現(xiàn)滾動(dòng)聯(lián)動(dòng)效果。

二、CSS 滾動(dòng)驅(qū)動(dòng)動(dòng)畫

我們可以想一下，如果是IntersectionObserver該如何做呢？沒錯(cuò)，就是監(jiān)聽每一塊區(qū)域的出現(xiàn)時(shí)機(jī)，然后改變導(dǎo)航的狀態(tài)。

剛好CSS滾動(dòng)驅(qū)動(dòng)動(dòng)畫中的view-timeline可以實(shí)現(xiàn)類似的效果。它可以「監(jiān)測(cè)到元素在可視區(qū)」的情況。

不過，單獨(dú)依靠view-timeline還不行，因?yàn)槟J(rèn)情況下，CSS 滾動(dòng)驅(qū)動(dòng)作用范圍只能影響到子元素，而我們的dom結(jié)構(gòu)明顯是分離的。

<nav>
  <a href="#t1">一、標(biāo)題一</a>
  <a href="#t2">二、標(biāo)題二</a>
	...
</nav>

<div class="content">
  <h2 id="t1">一、標(biāo)題一</h2>
  <section>
    ...
  </section>
</div>
<div class="content">
  <h2 id="t2">二、標(biāo)題二</h2>
  <section>
    ...
  </section>
</div>

為了解決這個(gè)問題，我們需要用到 CSS 時(shí)間線范圍，也就是 timeline-scope。

https://developer.mozilla.org/en-US/docs/Web/CSS/timeline-scope

這里簡(jiǎn)單介紹一下，假設(shè)有這樣一個(gè)結(jié)構(gòu)。

<div class="content">
  <div class="box animation"></div>
</div>

<div class="scroller">
  <div class="long-element"></div>
</div>

這是兩個(gè)元素，右邊的是滾動(dòng)容器，左邊的是一個(gè)可以旋轉(zhuǎn)的矩形。

我們想實(shí)現(xiàn)滾動(dòng)右邊區(qū)域時(shí)，左邊矩形跟著旋轉(zhuǎn)，如何實(shí)現(xiàn)呢？

可以給他們共同的父級(jí)，比如body定義一個(gè)timeline-scope。

body{
  timeline-scope: --myScroller;
}

然后，滾動(dòng)容器的滾動(dòng)和矩形的動(dòng)畫就可以通過這個(gè)變量關(guān)聯(lián)起來了。

.scroller {
  overflow: scroll;
  scroll-timeline-name: --myScroller;
  background: deeppink;
}
.animation {
  animation: rotate-appear;
  animation-timeline: --myScroller;
}

效果如下：

這樣就實(shí)現(xiàn)任意元素間的滾動(dòng)聯(lián)動(dòng)。

回到這里，我們要做的事情其實(shí)很簡(jiǎn)單，給父級(jí)（body）定義多個(gè)timeline-scope，然后給內(nèi)容區(qū)域和導(dǎo)航區(qū)域都綁定一個(gè)相同CSS變量，具體做法如下：

<body style="timeline-scope: --t1,--t2,--t3,--t4,--t5,--t6;">
  <nav>
    <a href="#t1" style="--s: --t1">一、標(biāo)題一</a>
    <a href="#t2" style="--s: --t2;">二、標(biāo)題二</a>
    <a href="#t3" style="--s: --t3">三、標(biāo)題三</a>
    <a href="#t4" style="--s: --t4">四、標(biāo)題四</a>
    <a href="#t5" style="--s: --t5">五、標(biāo)題五</a>
    <a href="#t6" style="--s: --t6">六、標(biāo)題六</a>
  </nav>
  <h1>CSS 電梯導(dǎo)航</h1>
  <div class="content" style="--s: --t1">
    <h2 id="t1">一、標(biāo)題一</h2>
    <section>
      ...
    </section>
  </div>
  <div class="content" style="--s: --t2">
    <h2 id="t2">二、標(biāo)題二</h2>
    <section>
      ...
    </section>
  </div>
  <div class="content" style="--s: --t3">
    <h2 id="t3">三、標(biāo)題三</h2>
    <section>
      ...
    </section>
  </div>
  <div class="content" style="--s: --t4">
    <h2 id="t4">四、標(biāo)題四</h2>
    <section>
      ...
    </section>
  </div>
  <div class="content" style="--s: --t5">
    <h2 id="t5">五、標(biāo)題五</h2>
    <section>
      ...
    </section>
  </div>
  <div class="content" style="--s: --t6">
    <h2 id="t6">六、標(biāo)題六</h2>
    <section>
      ...
    </section>
  </div>

然后給內(nèi)容區(qū)域添加view-timeline-name，導(dǎo)航標(biāo)簽添加 animation-timeline，讓這兩者關(guān)聯(lián)起來，也就是內(nèi)容滾動(dòng)時(shí)，導(dǎo)航的動(dòng)畫跟著執(zhí)行，這里的動(dòng)畫很簡(jiǎn)單，就是改變導(dǎo)航鏈接的文字顏色和邊框顏色，關(guān)鍵實(shí)現(xiàn)如下：

.content{
  view-timeline-name: var(--s);
}
nav>a{
  /**/
  animation: active;
  animation-timeline: var(--s);
}
@keyframes active {
  0%,100% {
    color: #6f00ff;
    border-color: #6f00ff;
  }
}

效果如下：

這樣滾動(dòng)聯(lián)動(dòng)效果基本就出來了，不過還是有些小問題，接著優(yōu)化。

三、CSS 滾動(dòng)視區(qū)范圍

前面的實(shí)現(xiàn)其實(shí)還個(gè)小問題，右邊的導(dǎo)航會(huì)同時(shí)選中多個(gè)。

很明顯是因?yàn)樽髠?cè)的內(nèi)容同時(shí)出現(xiàn)了這兩部分區(qū)域。

如果每一塊內(nèi)容高度更少，那同時(shí)選中的就更多了，就像這樣。

而我們需要的肯定是同一時(shí)刻只選中一個(gè)導(dǎo)航，你可以自己定義規(guī)則，比如后面的優(yōu)先于前面的。

那CSS該如何實(shí)現(xiàn)這樣的效果呢？

其實(shí)，這里需要換一種思維，上面的實(shí)現(xiàn)之所以會(huì)同時(shí)出現(xiàn)多個(gè)選中，是因?yàn)橐晠^(qū)范圍太大，是整個(gè)屏幕，所以可以同時(shí)匹配到多個(gè)內(nèi)容區(qū)域。

因此，我們可以手動(dòng)的減少視區(qū)范圍，一直減少成一條線，這樣無論怎樣滾動(dòng)，都只會(huì)匹配一個(gè)區(qū)域。

在這里，我們可以通過view-timeline-inset來手動(dòng)改變視區(qū)范圍，默認(rèn)是0。

比如我們希望以滾動(dòng)區(qū)域中間為分割線，只要滾動(dòng)到達(dá)這個(gè)點(diǎn)，就高亮當(dāng)前導(dǎo)航，可以這樣實(shí)現(xiàn)。

.content{
  view-timeline-name: var(--s);
  view-timeline-inset: 50%; /*完整寫法是 50% 50%*/
}

為了方便演示，我在滾動(dòng)區(qū)域中間加了一條紅色的線，便于觀察。

可以很清楚的發(fā)現(xiàn)，只要越過這條線，導(dǎo)航馬上觸發(fā)高亮選中。

當(dāng)然你也可以自己調(diào)整這個(gè)臨界線，比如下面的表示在距離滾動(dòng)區(qū)域底部30%的地方做判斷。

.content{
  view-timeline-name: var(--s);
  view-timeline-inset: 70% 30%; 
}

這樣就實(shí)現(xiàn)了我們想要的效果了，你也可以訪問以下在線鏈接查看實(shí)際效果（chrome 116+）。

CSS 電梯導(dǎo)航 (codepen.io)[1]
CSS 電梯導(dǎo)航 (juejin.cn)[2]

四、兼容性和總結(jié)

看似這么多，其實(shí)核心代碼就這幾行。

body{
  timeline-scope: --t1,--t2,--t3,--t4,--t5,--t6;
}
.content{
  view-timeline-name: var(--s);
  view-timeline-inset: 50%;
}
nav>a{
  animation: active;
  animation-timeline: var(--s);
}
@keyframes active {
  0%,100% {
    color: #6f00ff;
    border-color: #6f00ff;
  }
}

包括在HTML中的幾行自定義變量，是不是還不到 10 行？相比 JS實(shí)現(xiàn)，代碼更簡(jiǎn)單，性能也更好，無需初始化，也不用等待 dom 加載，擴(kuò)展性也強(qiáng)。

唯一的缺點(diǎn)可能是兼容性不足，由于依賴timeline-scope，所以必須Chrome 116+，完整兼容性如下：

下面總結(jié)一下

滾動(dòng)錨定可以借助a標(biāo)簽和#id實(shí)現(xiàn)自動(dòng)滾動(dòng)跳轉(zhuǎn)。
scroll-behavior: smooth可以實(shí)現(xiàn)平滑滾動(dòng)。
默認(rèn)情況下，CSS 滾動(dòng)驅(qū)動(dòng)作用范圍只能影響到子元素，但是通過timeline-scope，可以讓任意元素都可以受到滾動(dòng)驅(qū)動(dòng)的影響。
利用timeline-scope，我們可以將每個(gè)內(nèi)容的位置狀態(tài)和每個(gè)導(dǎo)航的選中狀態(tài)聯(lián)動(dòng)起來。
右邊的導(dǎo)航會(huì)同時(shí)選中多個(gè)是因?yàn)樽筮叺臐L動(dòng)視區(qū)太大了，可以同時(shí)包含多個(gè)內(nèi)容區(qū)域。
可以用view-timeline-inset來手動(dòng)改變視區(qū)范圍，縮小成一條線，這樣無論怎樣滾動(dòng)，都只會(huì)匹配一個(gè)區(qū)域
兼容性還不足，目前是Chrome 116+。

總的來說，CSS滾動(dòng)驅(qū)動(dòng)動(dòng)畫不愧是2023年度最強(qiáng)特性，可以做的事情太多了，很多 JS才能實(shí)現(xiàn)的交互都可以取代了，而且做的更好，至于兼容性，還是留給時(shí)間吧。

[1]CSS 電梯導(dǎo)航 (codepen.io)： https://codepen.io/xboxyan/pen/zYVBEWq。

[2]CSS 電梯導(dǎo)航 (juejin.cn)： https://code.juejin.cn/pen/7396195867155562508。

責(zé)任編輯：姜華來源：前端偵探