整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
為啥沒有早點知道scrollIntoView！??！
### 引言
身為一名Web前端開發(fā)者，你是否曾陷入過滾動頁面尋找某個特定元素的困境？亦或是想要精準(zhǔn)定位某元素在視窗中央?yún)s苦于找不到合適的解決方案？今天，我們要向你揭示一個鮮為人知卻又極其實用的Web API——`scrollIntoView`，它可以幫助我們在頁面中輕松定位任何元素，實現(xiàn)流暢自然的滾動效果。這篇文章將深度剖析`scrollIntoView`的用法及其背后的原理，從此，你再也不必為頁面滾動問題而煩惱！
### 一、scrollIntoView的基本用法
**1.1 scrollIntoView是什么？**
`scrollIntoView`是DOM元素的一個原生方法，它可以讓指定元素滾動到視窗可見區(qū)域，也就是讓目標(biāo)元素盡可能地出現(xiàn)在瀏覽器窗口的可視范圍內(nèi)。
```html
<button id="scroll-to-me">點擊我，讓我進入視野</button>
<script>
const button=document.querySelector('#scroll-to-me');
button.addEventListener('click', ()=> {
button.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
});
</script>
```
**1.2 參數(shù)詳解**
- `behavior`: 可選參數(shù)，決定滾動動畫的速度，可設(shè)為`'auto'`（默認(rèn)，無動畫）或`'smooth'`（平滑滾動）。
- `block`: 指定垂直滾動方式，可選值有`'start'`、`'center'`、`'end'`、`'nearest'`。默認(rèn)值為`'auto'`，根據(jù)元素的位置自動選擇最佳滾動位置。
- `inline`: 指定水平滾動方式，用法同`block`參數(shù)。
### 二、scrollIntoView的實際應(yīng)用場景
**2.1 頁面內(nèi)的錨點導(dǎo)航**
```html
<a href="#section2">跳轉(zhuǎn)到第二部分</a>
<div id="section1">...</div>
<div id="section2">這里是第二部分</div>
<script>
window.onload=()=> {
const hash=window.location.hash;
const targetElement=document.querySelector(hash);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth' });
}
};
</script>
```
**2.2 自動滾動表單中的錯誤字段**
```html
<form>
<input type="text" id="field1" required>
<input type="text" id="field2" required>
<!-- 其他字段... -->
<button type="submit" id="submit-btn">提交</button>
</form>
<script>
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>
```
### 三、高級用法與注意事項
**3.1 平滑滾動與性能優(yōu)化**
使用`behavior: 'smooth'`時，瀏覽器會創(chuàng)建一個平滑滾動動畫，這可能導(dǎo)致CPU占用較高，特別是在移動端。因此，應(yīng)合理評估滾動動畫對用戶體驗和性能的影響。
**3.2 瀏覽器兼容性**
`scrollIntoView`的選項參數(shù)在某些老版本瀏覽器中可能不受支持，因此在實際使用時需注意瀏覽器兼容性，必要時可通過polyfill庫或條件判斷來提供備選方案。
### 結(jié)語
`scrollIntoView`這個隱藏的寶藏API無疑為Web開發(fā)者提供了極大便利，無論是實現(xiàn)頁面內(nèi)部的錨點導(dǎo)航，還是聚焦表單錯誤提示，它都能輕松應(yīng)對。下次當(dāng)你面臨頁面滾動難題時，不妨試試`scrollIntoView`，相信它會讓你感嘆：“為啥沒有早點知道scrollIntoView！”如今，就讓我們一起擁抱這個強大的API，為用戶創(chuàng)造更流暢、更友好的瀏覽體驗吧！
有時候，我們想閱讀頁面中某段精彩的內(nèi)容，但由于頁面太長，用戶需要自己滾動頁面，查找起來非常麻煩 ，很容易讓人失去繼續(xù)往下閱讀的興趣。這樣體驗非常不好，所以我們可以想辦法 實現(xiàn)點擊某段文字或者圖片跳轉(zhuǎn)到頁面指定位置，方便用戶的閱讀。
這里作為錨點的標(biāo)簽可以是任意元素。
<a href="#aa">跳轉(zhuǎn)到 id 為 aa 標(biāo)記的錨點</a>
<p>-------------分隔線-------------</p>
<div id="aa">a</div>
這里作為錨點的標(biāo)簽只能是 a 標(biāo)簽。
<a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標(biāo)簽錨點</a>
<p>-------------分隔線-------------</p>
<a name="bb">name 為 bb 的 a 標(biāo)簽的錨點</a>
<div id="abb">bbb</div>
注意：當(dāng)以 ' a 標(biāo)簽 name 屬性作為錨點 ' 和 ' 利用 id 為標(biāo)記的錨點 ' 同時出現(xiàn)（即以 name 為錨點和以 id 為錨點名字相同時），會將后者作為錨點。
window.scrollTo 滾動到文檔中的某個坐標(biāo)。可提供滑動效果，想具體了解 scrollTo() 可以看看 MDN 中的介紹。
話不多說，看下面代碼
「html 部分」:
<a id="linkc">平滑滾動到 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é)點
let bridge = toEl;
let body = document.body;
let height = 0;
// 計算該 DOM 節(jié)點到 body 頂部距離
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
// 滾動到指定位置
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
Element.scrollIntoView() 方法讓當(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ā)中，請參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對應(yīng)的標(biāo)準(zhǔn)文檔可能被重新修訂，所以在未來版本的瀏覽器中該功能的語法和行為可能隨之改變。
下面為了方便看效果，把上面的代碼整理在一起。
<!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)記的錨點 a</a>
<p>-------------分隔線-------------</p>
<a name="aa">hhh</a>
<div id="aa">aa</div>
<a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標(biāo)簽錨點</a>
<p>-------------分隔線-------------</p>
<a name="bb">name 為 bb 的 a 標(biāo)簽的錨點</a>
<p>-------------分隔線-------------</p>
<div>bb</div>
<a id="linkc">平滑滾動到 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é)點
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>
效果圖：
你是否遇到過類似的需求：需要在頁面中實現(xiàn)錨點定位，確保進入頁面時某個元素能夠出現(xiàn)在可視區(qū)域內(nèi)？點擊列表某個元素自動滾動到視圖中間？這類需求涉及處理元素與可視區(qū)域之間的關(guān)系，比如使用 scrollTop、scroll、監(jiān)聽滾動等方式實現(xiàn)。
今天發(fā)現(xiàn)一種最簡單的方式：scrollIntoView，
scrollIntoView() 方法會滾動元素的父容器，使元素出現(xiàn)在可視區(qū)域
scss復(fù)制代碼// 默認(rèn)為scrollIntoView(true)
element.scrollIntoView()
// alignToTop 布爾值 可選
element.scrollIntoView(alignToTop)
element.scrollIntoView(scrollIntoViewOptions)屬性都是可選
定義滾動效果，值必須以下之一：
定義垂直方向的對齊，start、center、end 或 nearest 之一。默認(rèn)為 start。
定義水平方向的對齊，start、center、end 或 nearest 之一。默認(rèn)為 nearest（最近展示）。
默認(rèn)效果：
作者：Bellet
鏈接：https://juejin.cn/post/7343243882027941903
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
