您现在的位置是:首页 > Javascript
当前栏目
如何优雅地取消页面滚动恢复行为?
2023-02-19 12:21:27 时间
前言
通常我们在浏览web页面时,当浏览到某个位置跳去了其它页面浏览后再回到开始时的那个页面时,浏览器会帮我们重新定位到我们离开页面时的位置,对于绝大多数场景来说,这确实是一个非常好的体验设计!但有时候我们往往不想这样,这个时候我们是不是通常会使用scrollTop来解决这一问题,今天我们再来介绍一种更佳优雅的方法scrollRestoration。
history
我们平常在web页面中会用到:history.forward()、history.back()或history.go(1)之类的操作,但history还有另外一个神奇的属性 —— 「scrollRestoration 滚动恢复」。
scrollRestoration
History 的接口—— 「滚动恢复属性」 允许 web 应用程序在历史导航上显式地设置默认滚动恢复行为
语法
值
- auto:将恢复用户已滚动到的页面上的位置。(默认值)
- manual:未还原页上的位置。用户必须手动滚动到该位置。
文档上虽然并没有明确说明谁是默认值,但从我们的平常使用体验上来将,这个默认值应该就是auto。当然我们也可以自行验证,找一个自己的页面在浏览器打开,然后在控制台输入history。
这里我们就能看到history.scrollRestoration的默认值就是auto。
所以也就是说如果浏览器支持history.scrollRestoration并且值为auto则会默认的滚动恢复行为,如果设置为manual则可以取消滚动恢复行为
这种方式相对于我们常用的scrollTop要更加的优雅。
兼容性
相关文章
- JDK中内嵌JS引擎介绍及使用
- 49195,npm最后的疯狂?盘点10款最有前途JavaScript构建工具
- 译文:5个增强Node.js应用程序增强功能
- 4个例子,吃透 JavaScript 实现的二叉搜索树 BST
- Vue中使用XML和JSON格式互转插件
- JDK中Jshell简单使用(JDK9版本以上或者JDK9版本)
- shiro中的JSP标签支持
- Java技术点-json转对象,对象转json
- SpringBoot+SpringDataJpa @Query之 JPQL使用书写模板(模糊查询and条件查询)
- Spring Boot中的Freemarker模版引擎引用css和js的正确姿势
- Node.js解压版的环境配置及相关常用命令
- JSP学习笔记(6)—— 自定义MVC框架
- JSP学习笔记(5)——Servlet、监听器、过滤器、MVC模式介绍
- Jsp学习笔记(4)——分页查询
- APIJSON简单使用
- JSP学习笔记(3)——JSTL 标签库
- JSP学习笔记(1)——Jsp指令、动作元素和内置对象
- JavaScript ES6 Promise对象
- Web前端——JavaScript扩展补充
- Web前端——表单提交和Js添加选项