大家可能都知道 dom 有一個(gè) scrollIntoview方法，它可以輕易的讓目標(biāo)元素滾動(dòng)到可視范圍之內(nèi)，而無(wú)需手動(dòng)計(jì)算偏移量Zph28資訊網(wǎng)——每日最新資訊28at.com

dom.scrollIntoview()

效果如下Zph28資訊網(wǎng)——每日最新資訊28at.com

圖片Zph28資訊網(wǎng)——每日最新資訊28at.com

這樣跳轉(zhuǎn)比較生硬，因此可能還知道有這樣一個(gè)參數(shù)Zph28資訊網(wǎng)——每日最新資訊28at.com

dom.scrollIntoview({  behavior: 'smooth'})

這樣就能平滑滾動(dòng)了Zph28資訊網(wǎng)——每日最新資訊28at.com

圖片Zph28資訊網(wǎng)——每日最新資訊28at.com

一、重新學(xué)習(xí) scrollIntoView 語(yǔ)法

打開(kāi) MDN 官網(wǎng)Zph28資訊網(wǎng)——每日最新資訊28at.com

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoViewZph28資訊網(wǎng)——每日最新資訊28at.com

Zph28資訊網(wǎng)——每日最新資訊28at.com

語(yǔ)法其實(shí)很簡(jiǎn)單，有三種形式Zph28資訊網(wǎng)——每日最新資訊28at.com

scrollIntoView()scrollIntoView(alignToTop)scrollIntoView(scrollIntoViewOptions)

首先看第 2 種形式，就一個(gè)參數(shù)「alignToTop」 布爾值Zph28資訊網(wǎng)——每日最新資訊28at.com

默認(rèn)為 true，表示是否沿著元素的頂端和滾動(dòng)容器對(duì)齊，否則和元素底端對(duì)齊。Zph28資訊網(wǎng)——每日最新資訊28at.com

dom.scrollIntoView()dom.scrollIntoView(true)

這兩種效果是相同的Zph28資訊網(wǎng)——每日最新資訊28at.com

圖片Zph28資訊網(wǎng)——每日最新資訊28at.com

如果設(shè)置為false，那么會(huì)居底部對(duì)齊Zph28資訊網(wǎng)——每日最新資訊28at.com

dom.scrollIntoview(false)

效果如下Zph28資訊網(wǎng)——每日最新資訊28at.com

圖片Zph28資訊網(wǎng)——每日最新資訊28at.com

注意，「alignToTop」自適應(yīng)于「垂直方向」上的滾動(dòng)，如果是「水平方向」的滾動(dòng)，設(shè)置了沒(méi)有任何區(qū)別。Zph28資訊網(wǎng)——每日最新資訊28at.com

// 水平滾動(dòng)下，以下 3 種寫(xiě)法作用相同dom.scrollIntoview()dom.scrollIntoview(true)dom.scrollIntoview(false)

效果都是一樣的，如下Zph28資訊網(wǎng)——每日最新資訊28at.com

圖片Zph28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-10414-0.html重新學(xué)習(xí) scrollIntoview

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： Java 中 String 類你知道多少？

下一篇： Vercel推出的前端AI工具v0，會(huì)改變前端么？