重新学习 scrollIntoview-28资讯网——每日最新资讯28at.com

重新学习 scrollIntoview

2023-09-18 21:40:18 软件 219观看

摘要大家可能都知道 dom 有一个 scrollIntoview方法，它可以轻易的让目标元素滚动到可视范围之内，而无需手动计算偏移量dom.scrollIntoview()效果如下图片这样跳转比较生硬，因此可能还知道有这样一个参数dom.scrollIntoview({

大家可能都知道 dom 有一个 scrollIntoview方法，它可以轻易的让目标元素滚动到可视范围之内，而无需手动计算偏移量

dom.scrollIntoview()

效果如下

图片

这样跳转比较生硬，因此可能还知道有这样一个参数

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

这样就能平滑滚动了

图片

一、重新学习 scrollIntoView 语法

打开 MDN 官网

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

语法其实很简单，有三种形式

scrollIntoView()scrollIntoView(alignToTop)scrollIntoView(scrollIntoViewOptions)

首先看第 2 种形式，就一个参数「alignToTop」布尔值

默认为 true，表示是否沿着元素的顶端和滚动容器对齐，否则和元素底端对齐。

dom.scrollIntoView()dom.scrollIntoView(true)

这两种效果是相同的

图片

如果设置为false，那么会居底部对齐

dom.scrollIntoview(false)

效果如下

图片

注意，「alignToTop」自适应于「垂直方向」上的滚动，如果是「水平方向」的滚动，设置了没有任何区别。

// 水平滚动下，以下 3 种写法作用相同dom.scrollIntoview()dom.scrollIntoview(true)dom.scrollIntoview(false)

效果都是一样的，如下

图片

声明：本网页内容旨在传播知识，不代表本站观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。

显示全文