如何滚动到特定位置?scrollIntoView了解一下

前言

平常开发中,我们会遇到某些场景,比如说我浏览的页面滚动到了的某个特定位置,下一次浏览还需要保留在原来位置。

通常我们缓存当前浏览滚动的高度,那么跳转到特定的位置我们介绍几种常用的方式。

1. 常用跳转方式

假设我们有一个具有 id 为 "container" 的容器元素,滚动到100px处:

1.1 使用 scrollTop属性

具体代码:

javascript 复制代码
var container = document.getElementById("container");
container.scrollTop = 100;

1.2 使用 scrollBy 方法:

该方法接受两个参数,分别表示水平和垂直滚动的像素数。

具体代码:

javascript 复制代码
var container = document.getElementById("container");
container.scrollBy(0, 100);

1.3 使用 scrollTo 方法

类似于 scrollBy 方法,scrollTo 方法可以用于滚动元素到指定的位置。不同之处在于,scrollTo 方法接受绝对的滚动位置而不是相对位置。

具体代码:

javascript 复制代码
var container = document.getElementById("container");
container.scrollTo(0, 500);

1.4 使用id锚点链接跳转

具体代码:

js 复制代码
<a href="#target-id">跳转到目标</a>

<div id="target-id">
  <!-- 目标内容 -->
</div>

缺点是:需要唯一的id,且url地址栏有hash,会导致路由框架跳转错误。

2. scrollIntoView

介绍一个非常好用的前端API---scrollintoView,可以方便地让页面元素滚动到可视区域。

2.1 属性介绍

  • behavior 定义滚动是立即的还是平滑的动画。

    • smooth:滚动应该是平滑的动画。
    • instant:滚动应该通过一次跳跃立刻发生。
    • auto:滚动行为由 scroll-behavior 的计算值决定。
  • block 定义垂直方向的对齐,默认为 start

    • start
    • center
    • end
    • nearest
  • inline 定义水平方向的对齐,默认为 nearest

    • start
    • center
    • end
    • nearest

2.2 案例

例如:获取到某个元素的dom节点,以任意页面为例,通过当前元素的$0进行调用

单纯调用: 添加属性调用,比如blockcenter,则居中显示:

2.3 应用场景

它可以应用于各种不同的场景,例如以下几个:

  1. 导航菜单:当用户点击导航菜单中的链接时,可以使用 scrollIntoView 将页面滚动到相应的部分。

  2. 页面内锚点链接:当页面内存在锚点链接时,可以使用 scrollIntoView 将页面滚动到对应的位置。

  3. 滚动加载:在一些需要滚动加载内容的情况下,当用户滚动到页面底部时,可以使用 scrollIntoView 将新加载的内容滚动到视图中。

  4. 表单验证:当用户提交表单时,如果发现输入错误,可以使用 scrollIntoView 将错误的输入字段滚动到可视区域内,以便用户直接看到并修改错误。

4. 总结

本文介绍了常用滚动到特定位置的一些方法属性。 主要说明如何使用scrolllntoView API来将页面元素滚动到可视范围内,详细说明该API的使用方法和配置选项以及应用场景。

注意:该方法不仅适用于整个网页的滚动,也可以用于任何一个区域的滚动。

单纯记录,不喜勿喷。如果错误,请指正O^O!

相关推荐
程序员码歌2 分钟前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康1 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海1 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏2 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码2 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby2 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹2 小时前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel2 小时前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
wyzqhhhh3 小时前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富3 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js