快捷導航

JavaScript實現(xiàn)內(nèi)容滾動與導航標簽互動關(guān)聯(lián)方案

更新時間：2022年06月07日 10:01:22 作者：? 靈扁扁? ?

這篇文章主要介紹了JavaScript實現(xiàn)內(nèi)容滾動與導航標簽互動關(guān)聯(lián)方案，主要根據(jù)滾動左側(cè)內(nèi)容，關(guān)聯(lián)激活右側(cè)導航節(jié)點展開相應(yīng)介紹，需要的小伙伴可以參考一下

1.數(shù)據(jù)初始化處理
2.監(jiān)聽滾動條，以便滾動內(nèi)容時，關(guān)聯(lián)激活右側(cè)導航標簽
3.實現(xiàn)點擊右側(cè)導航節(jié)點，關(guān)聯(lián)左側(cè)內(nèi)容滾動到可視區(qū)頂部
4.實現(xiàn)滾動右側(cè)內(nèi)容，關(guān)聯(lián)激活左側(cè)導航節(jié)點

四、完整 demo 示例代碼

一、需求場景描述

1.先看演示效果

類似這種，當也頁面左側(cè)內(nèi)容滾動的時候，需要關(guān)聯(lián)激活左側(cè)導航節(jié)點；當點擊右側(cè)導航節(jié)點時，也會將左側(cè)對應(yīng)的內(nèi)容滾動到可視區(qū)域頂部的場景，并不少見，比如知識類社區(qū)，掘金查看文章時，百度查看百科詞條時，都有這種場景，而我的實際開發(fā)種也遇到此類需求。遂有此文。

2.需求分解

1.滾動左側(cè)內(nèi)容，關(guān)聯(lián)激活右側(cè)導航節(jié)點
2.單擊右側(cè)導航節(jié)點，右側(cè)相應(yīng)的段落滾動到可視區(qū)頂部

二、關(guān)鍵技術(shù)點提前知

技術(shù)點1：Element.scrollIntoView()

1.scrollIntoView() 的作用：

scrollIntoView()方法會滾動元素的父容器，使被調(diào)用scrollIntoView()的元素對用戶可見。

2.基本用法介紹：

var el = document.getElementById("p1");
// true 可以省略效果相同
el.scrollIntoView(true)

// alignToTop：Boolean型參數(shù)。
// 如果為 true，元素的頂端將和其所在滾動區(qū)的可視區(qū)域的頂端對齊。
// 如果為 false，元素的底端將和其所在滾動區(qū)的可視區(qū)域的底端對齊。
el.scrollIntoView(false);

// 可選，scrollIntoViewOptions：{behavior: "smooth", block: "end", inline: "nearest"}
// 可選，behavior ：定義動畫過渡效果，"auto"或 "smooth" 之一。默認為 "auto"。
// 可選，block：定義垂直方向的對齊，"start", "center", "end", 或 "nearest"之一。默認為 "start"。
// 可選，inline：定義水平方向的對齊，"start", "center", "end", 或 "nearest"之一。默認為 "nearest"。
el.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
el.scrollIntoView({block: "end"});

3.注意事項

普通的布局沒問題，但是要注意，取決于其它元素的布局情況，此元素可能不會完全滾動到頂端或底端。比如整體上已經(jīng)到頂部了，無法再滾動，那么該元素就不會移動到可視區(qū)的頂部。

技術(shù)點2：Element.getBoundingClientRect()

Element.getBoundingClientRect() 方法返回元素的大小及其相對于視口的位置。返回值是一個 DOMRect 對象，這個對象是由該元素的 getClientRects() 方法返回的一組矩形的集合，就是該元素的 CSS 邊框大小。返回的結(jié)果是包含完整元素的最小矩形，并且擁有l(wèi)eft, top, right, bottom, x, y, width, 和 height這幾個以像素為單位的只讀屬性用于描述整個邊框。除了width 和 height 以外的屬性是相對于視圖窗口的左上角來計算的。

下面是它的打印信息示例：

console.dir(document.getElementById("p1").getBoundingClientRect())

如果是標準盒子模型，元素的尺寸等于width/height + padding + border-width的總和。如果box-sizing: border-box，元素的的尺寸等于 width/height。

三、實現(xiàn)思路分析

1.數(shù)據(jù)初始化處理

// 從內(nèi)容數(shù)據(jù)list中，獲取段落標題作為導航標題。并為導航節(jié)點增加href，以段落的id值作為href的值
this.list.map((item, i) => {
  this.activities.push({title: item.title, act: false, href: "#p" + i});
});

2.監(jiān)聽滾動條，以便滾動內(nèi)容時，關(guān)聯(lián)激活右側(cè)導航標簽

// 監(jiān)聽滾動條
window.addEventListener("scroll", function (e) {
  // 防抖動處理
  clearTimeout(that.timeout)
  this.timeout = setTimeout(() => {
    that.activeNavNode(e)
  }, 100)
});

3.實現(xiàn)點擊右側(cè)導航節(jié)點，關(guān)聯(lián)左側(cè)內(nèi)容滾動到可視區(qū)頂部

// dom中定位導航
navToPosition(item, index) {
  // 激活相應(yīng)的導航節(jié)點，變色
  this.active = index;
  // 根據(jù)導航節(jié)點的href信息即id信息，獲取對應(yīng)的元素節(jié)點，通過 scrollIntoView 滾動該元素到可視區(qū)頂部
  document.querySelector(item.href).scrollIntoView(true);
},

4.實現(xiàn)滾動右側(cè)內(nèi)容，關(guān)聯(lián)激活左側(cè)導航節(jié)點

// 激活左側(cè)對應(yīng)的導航條
activeNavNode(e) {
  const nodes = document.getElementsByTagName("section")
  for (let i = 0; i < nodes.length; i++) {
    let node = nodes[i];
    // 獲取該元素此時相對于視口的頂部的距離，即是元素頂部距離視口屏幕上邊的距離
    let nodeY = node.getBoundingClientRect().y
    // 當元素距離視口頂部的距離在 [0,200] 之間，設(shè)置激活該元素對應(yīng)左側(cè)的導航標題，這個數(shù)字可以按需定義
    // 這里關(guān)聯(lián)內(nèi)容和導航標簽，是巧妙利用了內(nèi)容在元素集合中的索引序號和導航標簽中的一致
    // 即是 list 和 activities 和 nodes 中下標相等的元素，具有對應(yīng)關(guān)聯(lián)的關(guān)系
    if (nodeY <= 200 && nodeY >= 0) {
      this.active = Number(i)
      return
    }
  }
},