js api scrollIntoView

最新推荐文章于 2024-03-24 09:38:59 发布

stpzhf

最新推荐文章于 2024-03-24 09:38:59 发布

阅读量425

点赞数 8

分类专栏： vue js ts 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/stpzhf/article/details/135398478

版权

vue 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

前言

今天记录一个非常常用的js api scrollIntoView 它可以轻易的让目标元素滚动到可视范围之内，而无需手动计算偏移量

一、用法

document.querySelector('.dept-title').scrollIntoView()

二、参数

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

scrollIntoView(option)
option {
behavior?: "smooth"|'auto'
block?: 'start'|'center'|'end'|'nearest'
}

option 参数:
behavior: 
	auto 默认值
	smooth:平滑滚动
	instant: 无动画
block:
	start：默认值。元素顶部和滚动容器顶部对齐
	center：元素和滚动容器居中对齐
	end：元素底部和滚动容器底部对齐
	nearest：如果已经在视野范围内，就不滚动，否则就滚动到顶部或者底部（哪个更靠近就滚到哪里）




全部参数参考请参考mdn