滚动元素到可视区

概述

在项目里面,肯定会遇到元素跳转到可视区的需求,比较常见的就像百度搜索的时候,根据目录节点跳转指定章节到可视区,如下:

实现方案

地址哈希

点击对应元素,直接会在地址栏上拼接上元素hash值

js 复制代码
//a标签herf绑定hash id
<a href="#section-id">跳转到章节</a>
//绑定锚点hash id
<div id="section-id">目标内容</div>

好处

  • 直接地址分享给别人,能直接定位到指定元素为止

缺点

  • 无法实现更加精准的定位,只能默认顶部对齐(如:底部对齐、中间对齐、自定义位置对齐)
  • 如果spa应用使用hash路由,可能会出现些冲突,需要额外处理

js跳转

可通过如下api方式操作,更加灵活

1. scrollIntoView()

javascript 复制代码
element.scrollIntoView({
  behavior: 'smooth', // 可选: 'auto' 或 'smooth'
  block: 'nearest',   // 可选: 'start', 'center', 'end', 'nearest'
  inline: 'nearest'   // 可选: 'start', 'center', 'end', 'nearest'
});

2. scrollTo() 或 scroll()

javascript 复制代码
// 滚动到特定位置
window.scrollTo({
  top: element.offsetTop,
  behavior: 'smooth'
});

// 或者使用元素滚动
container.scroll({
  top: element.offsetTop - container.offsetTop,
  behavior: 'smooth'
});

好处

  • 自定义程度更好,可根据自己实际需求进行处理

缺点

  • 对外分享需要额外处理定位(如通过路由参数)
相关推荐
烛阴18 分钟前
带你用TS彻底搞懂ECS架构模式
前端·javascript·typescript
wayhome在哪28 分钟前
3 分钟上手!用 WebAssembly 优化前端图片处理性能(附完整代码)
javascript·性能优化·webassembly
卓码软件测评1 小时前
【第三方网站运行环境测试:服务器配置(如Nginx/Apache)的WEB安全测试重点】
运维·服务器·前端·网络协议·nginx·web安全·apache
龙在天1 小时前
前端不求人系列 之 一条命令自动部署项目
前端
开开心心就好1 小时前
PDF转长图工具,一键多页转图片
java·服务器·前端·数据库·人工智能·pdf·推荐算法
国家不保护废物1 小时前
10万条数据插入页面:从性能优化到虚拟列表的终极方案
前端·面试·性能优化
文心快码BaiduComate1 小时前
七夕,画个动态星空送给Ta
前端·后端·程序员
web前端1231 小时前
# 多行文本溢出实现方法
前端·javascript
文心快码BaiduComate1 小时前
早期人类奴役AI实录:用Comate Zulu 10min做一款Chrome插件
前端·后端·程序员
人间观察员1 小时前
如何在 Vue 项目的 template 中使用 JSX
前端·javascript·vue.js