重新学习 scrollIntoview

大家可能都知道 dom 有一个 scrollIntoview方法，它可以轻易的让目标元素滚动到可视范围之内，而无需手动计算偏移量zxf28资讯网——每日最新资讯28at.com

dom.scrollIntoview()

效果如下zxf28资讯网——每日最新资讯28at.com

图片zxf28资讯网——每日最新资讯28at.com

这样跳转比较生硬，因此可能还知道有这样一个参数zxf28资讯网——每日最新资讯28at.com

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

这样就能平滑滚动了zxf28资讯网——每日最新资讯28at.com

图片zxf28资讯网——每日最新资讯28at.com

一、重新学习 scrollIntoView 语法

打开 MDN 官网zxf28资讯网——每日最新资讯28at.com

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoViewzxf28资讯网——每日最新资讯28at.com

zxf28资讯网——每日最新资讯28at.com

语法其实很简单，有三种形式zxf28资讯网——每日最新资讯28at.com

scrollIntoView()scrollIntoView(alignToTop)scrollIntoView(scrollIntoViewOptions)

首先看第 2 种形式，就一个参数「alignToTop」 布尔值zxf28资讯网——每日最新资讯28at.com

默认为 true，表示是否沿着元素的顶端和滚动容器对齐，否则和元素底端对齐。zxf28资讯网——每日最新资讯28at.com

dom.scrollIntoView()dom.scrollIntoView(true)

这两种效果是相同的zxf28资讯网——每日最新资讯28at.com

图片zxf28资讯网——每日最新资讯28at.com

如果设置为false，那么会居底部对齐zxf28资讯网——每日最新资讯28at.com

dom.scrollIntoview(false)

效果如下zxf28资讯网——每日最新资讯28at.com

图片zxf28资讯网——每日最新资讯28at.com

注意，「alignToTop」自适应于「垂直方向」上的滚动，如果是「水平方向」的滚动，设置了没有任何区别。zxf28资讯网——每日最新资讯28at.com

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

效果都是一样的，如下zxf28资讯网——每日最新资讯28at.com

图片zxf28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-10414-0.html重新学习 scrollIntoview

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

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

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