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

dom.scrollIntoview()

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

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

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

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

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

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

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

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

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

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

語法其實很簡單，有三種形式UEi28資訊網(wǎng)——每日最新資訊28at.com

scrollIntoView()scrollIntoView(alignToTop)scrollIntoView(scrollIntoViewOptions)

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

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

dom.scrollIntoView()dom.scrollIntoView(true)

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

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

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

dom.scrollIntoview(false)

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

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

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

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

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

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

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

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

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

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