為啥沒有早點(diǎn)知道scrollIntoView！！！

### 引言

身為一名Web前端開發(fā)者，你是否曾陷入過(guò)滾動(dòng)頁(yè)面尋找某個(gè)特定元素的困境？亦或是想要精準(zhǔn)定位某元素在視窗中央?yún)s苦于找不到合適的解決方案？今天，我們要向你揭示一個(gè)鮮為人知卻又極其實(shí)用的Web API——`scrollIntoView`，它可以幫助我們?cè)陧?yè)面中輕松定位任何元素，實(shí)現(xiàn)流暢自然的滾動(dòng)效果。這篇文章將深度剖析`scrollIntoView`的用法及其背后的原理，從此，你再也不必為頁(yè)面滾動(dòng)問(wèn)題而煩惱！

### 一、scrollIntoView的基本用法

**1.1 scrollIntoView是什么？**

`scrollIntoView`是DOM元素的一個(gè)原生方法，它可以讓指定元素滾動(dòng)到視窗可見區(qū)域，也就是讓目標(biāo)元素盡可能地出現(xiàn)在瀏覽器窗口的可視范圍內(nèi)。

```html

const button=document.querySelector('#scroll-to-me');

button.addEventListener('click', ()=> {

button.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });

});

</script>

```

**1.2 參數(shù)詳解**

- `behavior`: 可選參數(shù)，決定滾動(dòng)動(dòng)畫的速度，可設(shè)為`'auto'`（默認(rèn)，無(wú)動(dòng)畫）或`'smooth'`（平滑滾動(dòng)）。

- `block`: 指定垂直滾動(dòng)方式，可選值有`'start'`、`'center'`、`'end'`、`'nearest'`。默認(rèn)值為`'auto'`，根據(jù)元素的位置自動(dòng)選擇最佳滾動(dòng)位置。

- `inline`: 指定水平滾動(dòng)方式，用法同`block`參數(shù)。

### 二、scrollIntoView的實(shí)際應(yīng)用場(chǎng)景

**2.1 頁(yè)面內(nèi)的錨點(diǎn)導(dǎo)航**

```html

<a href="#section2">跳轉(zhuǎn)到第二部分</a>

<div id="section2">這里是第二部分</div>

window.onload=()=> {

const hash=window.location.hash;

const targetElement=document.querySelector(hash);

if (targetElement) {

targetElement.scrollIntoView({ behavior: 'smooth' });

}

};

</script>

```

**2.2 自動(dòng)滾動(dòng)表單中的錯(cuò)誤字段**

```html

<form>

</form>

const form=document.querySelector('form');

const submitBtn=document.querySelector('#submit-btn');

form.addEventListener('submit', (event)=> {

event.preventDefault();

let firstInvalidField=form.querySelector(':invalid');

if (firstInvalidField) {

firstInvalidField.scrollIntoView({ behavior: 'smooth' });

}

});

</script>

```

### 三、高級(jí)用法與注意事項(xiàng)

**3.1 平滑滾動(dòng)與性能優(yōu)化**

使用`behavior: 'smooth'`時(shí)，瀏覽器會(huì)創(chuàng)建一個(gè)平滑滾動(dòng)動(dòng)畫，這可能導(dǎo)致CPU占用較高，特別是在移動(dòng)端。因此，應(yīng)合理評(píng)估滾動(dòng)動(dòng)畫對(duì)用戶體驗(yàn)和性能的影響。

**3.2 瀏覽器兼容性**

`scrollIntoView`的選項(xiàng)參數(shù)在某些老版本瀏覽器中可能不受支持，因此在實(shí)際使用時(shí)需注意瀏覽器兼容性，必要時(shí)可通過(guò)polyfill庫(kù)或條件判斷來(lái)提供備選方案。

### 結(jié)語(yǔ)

`scrollIntoView`這個(gè)隱藏的寶藏API無(wú)疑為Web開發(fā)者提供了極大便利，無(wú)論是實(shí)現(xiàn)頁(yè)面內(nèi)部的錨點(diǎn)導(dǎo)航，還是聚焦表單錯(cuò)誤提示，它都能輕松應(yīng)對(duì)。下次當(dāng)你面臨頁(yè)面滾動(dòng)難題時(shí)，不妨試試`scrollIntoView`，相信它會(huì)讓你感嘆：“為啥沒有早點(diǎn)知道scrollIntoView！”如今，就讓我們一起擁抱這個(gè)強(qiáng)大的API，為用戶創(chuàng)造更流暢、更友好的瀏覽體驗(yàn)吧！

言

有時(shí)候，我們想閱讀頁(yè)面中某段精彩的內(nèi)容，但由于頁(yè)面太長(zhǎng)，用戶需要自己滾動(dòng)頁(yè)面，查找起來(lái)非常麻煩，很容易讓人失去繼續(xù)往下閱讀的興趣。這樣體驗(yàn)非常不好，所以我們可以想辦法實(shí)現(xiàn)點(diǎn)擊某段文字或者圖片跳轉(zhuǎn)到頁(yè)面指定位置，方便用戶的閱讀。

一、純 html 實(shí)現(xiàn)

1. 利用 id 為標(biāo)記的錨點(diǎn)

這里作為錨點(diǎn)的標(biāo)簽可以是任意元素。

  <a href="#aa">跳轉(zhuǎn)到 id 為 aa 標(biāo)記的錨點(diǎn)</a>
  <p>-------------分隔線-------------</p>
  <div id="aa">a</div>

2. 利用 a 標(biāo)簽的 name 屬性作為錨點(diǎn)

這里作為錨點(diǎn)的標(biāo)簽只能是 a 標(biāo)簽。

  <a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標(biāo)簽錨點(diǎn)</a>
  <p>-------------分隔線-------------</p>
  <a name="bb">name 為 bb 的 a 標(biāo)簽的錨點(diǎn)</a>
  <div id="abb">bbb</div>

注意：當(dāng)以 ' a 標(biāo)簽 name 屬性作為錨點(diǎn) ' 和 ' 利用 id 為標(biāo)記的錨點(diǎn) ' 同時(shí)出現(xiàn)（即以 name 為錨點(diǎn)和以 id 為錨點(diǎn)名字相同時(shí)），會(huì)將后者作為錨點(diǎn)。

二、 js 實(shí)現(xiàn)

1. 利用 scrollTo()

window.scrollTo 滾動(dòng)到文檔中的某個(gè)坐標(biāo)。可提供滑動(dòng)效果，想具體了解 scrollTo() 可以看看 MDN 中的介紹。

話不多說(shuō)，看下面代碼

「html 部分」:

  <a id="linkc">平滑滾動(dòng)到 c</a>
  <p>-------------分隔線-------------</p>
  <div id="cc">c</div>

「js 部分」:

  var linkc = document.querySelector('#linkc')
  var cc = document.querySelector('#cc')

  function to(toEl) {
    // toEl 為指定跳轉(zhuǎn)到該位置的DOM節(jié)點(diǎn)
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    
    // 計(jì)算該 DOM 節(jié)點(diǎn)到 body 頂部距離
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)
    
    // 滾動(dòng)到指定位置
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

2. 利用 scrollIntoView()

Element.scrollIntoView() 方法讓當(dāng)前的元素滾動(dòng)到瀏覽器窗口的可視區(qū)域內(nèi)。想具體了解 scrollIntoView() 可以看看 MDN 中的介紹。

下面也直接上代碼

「html 部分」:

  <a onclick="goTo()">利用 scrollIntoView 跳轉(zhuǎn)到 d</a>
  <p>-------------分隔線-------------</p>
  <div id="dd">ddd</div>

「js 部分」:

  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }

注意：此功能某些瀏覽器尚在開發(fā)中，請(qǐng)參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對(duì)應(yīng)的標(biāo)準(zhǔn)文檔可能被重新修訂，所以在未來(lái)版本的瀏覽器中該功能的語(yǔ)法和行為可能隨之改變。

下面為了方便看效果，把上面的代碼整理在一起。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 600px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <a href="#aa">跳轉(zhuǎn)到以 id 為 aa 標(biāo)記的錨點(diǎn) a</a>
  <p>-------------分隔線-------------</p>
  <a name="aa">hhh</a>
  <div id="aa">aa</div>
  <a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標(biāo)簽錨點(diǎn)</a>
  <p>-------------分隔線-------------</p>
  <a name="bb">name 為 bb 的 a 標(biāo)簽的錨點(diǎn)</a>
  <p>-------------分隔線-------------</p>
  <div>bb</div>
  <a id="linkc">平滑滾動(dòng)到 c</a>
  <p>-------------分隔線-------------</p>
  <div id="cc">cc</div>
  <a onclick="goTo()">利用 scrollIntoView 跳轉(zhuǎn)到 d</a>
  <p>-------------分隔線-------------</p>
  <div id="dd">dd</div>
  <p>-------------分隔線-------------</p>
  <div></div>
</body>
<script>
  var cc = document.querySelector('#cc')
  var linkc = document.querySelector('#linkc')

  function to(toEl) {
    //ele為指定跳轉(zhuǎn)到該位置的DOM節(jié)點(diǎn)
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)

    console.log(height)
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

</script>
<script>
  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }
</script>
</html>

效果圖：

言

你是否遇到過(guò)類似的需求：需要在頁(yè)面中實(shí)現(xiàn)錨點(diǎn)定位，確保進(jìn)入頁(yè)面時(shí)某個(gè)元素能夠出現(xiàn)在可視區(qū)域內(nèi)？點(diǎn)擊列表某個(gè)元素自動(dòng)滾動(dòng)到視圖中間？這類需求涉及處理元素與可視區(qū)域之間的關(guān)系，比如使用 scrollTop、scroll、監(jiān)聽滾動(dòng)等方式實(shí)現(xiàn)。

今天發(fā)現(xiàn)一種最簡(jiǎn)單的方式：scrollIntoView，

實(shí)現(xiàn)

原始階段

通過(guò)scroll、setTimeout實(shí)現(xiàn)
問(wèn)題：耗時(shí)、切換不夠絲滑、占用任務(wù)隊(duì)列
（ps: 全靠硬算好吧~-~）

效果圖

解放雙手階段

通過(guò)scrollIntoView實(shí)現(xiàn)，指定元素id，通過(guò)id獲取元素
優(yōu)點(diǎn)：可以設(shè)置元素出現(xiàn)的位置、支持滾動(dòng)效果、減少代碼、高效實(shí)現(xiàn)

效果圖

scrollIntoView

scrollIntoView() 方法會(huì)滾動(dòng)元素的父容器，使元素出現(xiàn)在可視區(qū)域

語(yǔ)法

scss復(fù)制代碼// 默認(rèn)為scrollIntoView(true)
element.scrollIntoView()
// alignToTop 布爾值 可選
element.scrollIntoView(alignToTop)
element.scrollIntoView(scrollIntoViewOptions)

參數(shù)說(shuō)明

alignToTop

如果為 true，元素的頂端將和其所在滾動(dòng)區(qū)的可視區(qū)域的頂端對(duì)齊。相應(yīng)的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。這是這個(gè)參數(shù)的默認(rèn)值。
如果為 false，元素的底端將和其所在滾動(dòng)區(qū)的可視區(qū)域的底端對(duì)齊。相應(yīng)的 scrollIntoViewOptions: {block: "end", inline: "nearest"}。

scrollIntoViewOptions

屬性都是可選

behavior

定義滾動(dòng)效果，值必須以下之一：

smooth：滾動(dòng)應(yīng)該是平滑的動(dòng)畫。
instant：滾動(dòng)應(yīng)該通過(guò)一次跳躍立刻發(fā)生。
auto：滾動(dòng)行為由 scroll-behavior 的計(jì)算值決定。

smooth 效果

instant 效果

block

定義垂直方向的對(duì)齊，start、center、end 或 nearest 之一。默認(rèn)為 start。

inline

定義水平方向的對(duì)齊，start、center、end 或 nearest 之一。默認(rèn)為 nearest（最近展示）。

默認(rèn)效果：

瀏覽器兼容情況

作者：Bellet

鏈接：https://juejin.cn/post/7343243882027941903

在線咨詢

上一篇：保姆級(jí)B端彈窗拆解教程，看這一篇就夠了
下一篇：vue事件點(diǎn)擊穿透解決大法，看這篇文章就夠了

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

為啥沒有早點(diǎn)知道scrollIntoView！！！

言

一、 純 html 實(shí)現(xiàn)

1. 利用 id 為標(biāo)記的錨點(diǎn)

2. 利用 a 標(biāo)簽的 name 屬性作為錨點(diǎn)

二、 js 實(shí)現(xiàn)

1. 利用 scrollTo()

2. 利用 scrollIntoView()

言

實(shí)現(xiàn)

原始階段

效果圖

解放雙手階段

效果圖

scrollIntoView

語(yǔ)法

參數(shù)說(shuō)明

alignToTop

scrollIntoViewOptions

behavior

smooth 效果

instant 效果

block

inline

瀏覽器兼容情況

您的項(xiàng)目需求

一、純 html 實(shí)現(xiàn)