再次学习History.scrollRestoration

再次学习History.scrollRestoration

2024-05-23-23-52-40

之前在react.dev的源代码中了解到了这个HIstory的属性,当时写了一篇笔记来记录我对它的理解,现在看来还是一知半解。所以今天打算重新学习一下这个属性,主要从属性以及所属对象的介绍、使用方法,是否开启标准这几个方面来简单展开。

什么是scrollRestoration

scrollRestoration是一个属性,它所属的实例是浏览器的History。

这个属性是做什么的?它用来控制我们在切换历史页面的时候,滚动条的位置会不会恢复到之前的位置。
请添加图片描述

如图所示,我们切换历史页面,又切换回最之前的页面,发现滚动条的位置依然保持底部,也就是之前的位置。

什么是切换历史页面,从操作上来讲就是点击浏览器的回退(有的浏览器长按回退键会弹出历史的前面多个页面供选择)、前进按钮

从代码上来讲就是执行下面的这些操作:

history.back()
history.forward()
history.go(page) // page大于0,表示往后面翻对应的页数,反之则是往前翻对应的页数

那么scrollRestoration这个属性与是否恢复滚动条的关系是什么?

scrollRestoration可选的值为auto和manual (如果浏览器支持这个属性,那么它默认是auto)

scroll restoration mode, a scroll restoration mode, initially “auto”. HTML Standard

如果是auto:那么在切换历史页面的时候,滚动条会自动地恢复到切换之前的位置。

如果是manual:那么在切换页面的时候,滚动条会在顶部。

(上述的结果均在未手动修改state对应的滚动条位置的情况下)

属性的局限性

我之前觉得这个特性很好,但是为什么要单独地设置一个属性来控制是否要恢复到之前的滚动条位置呢?

在History API - 滚动恢复 | Blog | Chrome for Developers这篇文章中提到:

This often means unsightly jumps as the scroll position changes automatically, and especially so if your app does transitions, or changes the contents of the page in any way. Ultimately this leads to an horrible user experience.
To make matters even worse there’s very little you can do about it: Chrome triggers a popState event before the scroll event, which means you can read the current scroll position in popState and then reverse it in the scroll event handler with window.scrollTo (Ewww, but at least it works!). Firefox, however, triggers the scroll event before popState, so you have no idea what the old scroll value was in order to restore it. Bah!

翻译为中文:

这通常意味着当滚动位置自动改变时会出现难看的跳动,尤其是当你的应用程序进行过渡或以任何方式更改页面内容时。这最终会导致糟糕的用户体验。
更糟的是,你几乎无能为力:Chrome 会在 scroll 事件之前触发 popState 事件,这意味着你可以在 popState 中读取当前的滚动位置,然后在 scroll 事件处理程序中使用 window.scrollTo 恢复滚动位置(呃,但至少它能工作!)。然而,Firefox 则是在 popState 事件之前触发 scroll 事件,所以你无法知道旧的滚动位置以便恢复它。唉!

总结一下就是,此文的作者认为这个属性会造成的两个缺点是:

  1. 可能产生不太美观的跳跃:当滚动位置自动改变时,页面内容可能会突然跳动,尤其是在应用程序进行过渡或更改页面内容时,这会导致不好的用户体验。
  2. (在不开启这个属性的时候)非常难以人工地实现恢复滚动位置:由于不同浏览器在触发 popState 和 scroll 事件的顺序上存在差异(如 Chrome 和 Firefox),这使得在所有浏览器中一致地恢复滚动位置变得非常困难。

那么什么时候需要设置为manual?

参考上面的两个缺点来说,当满足以下的条件的时候,可以考虑设置为manual

  1. 页面确实会产生了不太美观的跳跃
  2. 不在意历史的滚动条位置,同时更希望全部由手动控制滚动条位置的时候

参考的资料

History: scrollRestoration property - Web APIs | MDN

HTML Standard

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/636335.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于BERT的中文命名实体识别识别实战

数据与代码链接见文末 bert开源项目解读:谷歌开源项目BERT源码解读与应用实例-CSDN博客 基于BERT的中文情感分析实战:基于BERT的中文情感分析实战-CSDN博客 1.命名实体识别任务 命名实体识别的主要目的是从文本中自动检测并分类出具有特定意义的命名实体,如人名、地名、组…

Stable Diffusion 模型演进:LDM、SD 1.0, 1.5, 2.0、SDXL、SDXL-Turbo 等

节前,我们星球组织了一场算法岗技术&面试讨论会,邀请了一些互联网大厂朋友、参加社招和校招面试的同学。 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 合集&#x…

【openlayers系统学习】1.4 交互-绘制新要素

四、绘制新要素 Drawing new features 绘制新要素 我们的特征编辑器现在可用于加载数据和修改特征。接下来,我们将添加 Draw​ 交互,以允许人们绘制新功能并将其添加到我们的源中。 首先,导入 Draw​ 交互(在 main.js​ 中&…

Qt笔记:动态处理多个按钮点击事件以更新UI

问题描述 在开发Qt应用程序时,经常需要处理多个按钮的点击事件,并根据点击的按钮来更新用户界面(UI),如下图。例如,你可能有一个包含多个按钮的界面,每个按钮都与一个文本框和一个复选框相关联…

论文AIGC降重

在这个人工智能横行的时代,AI写作工具被使用到论文写作中也已是常态。可AI写出来的东西怎么能逃得过AIGC检测呢?让我带大家了解,如何让你的论文在AI的包围下依旧保持那份独特的“人类气息”,成功通过AIGC检测。 AI写作工具是个好…

vue.js基础组件4--下

1.动态组件 1.定义动态组件 利用动态组件可以动态切换页面中显示的组件。使用<component>标签可以定义动态组件&#xff0c;语法格式如下。 <component is"要渲染的组件"></component>上述语法格式中&#xff0c;<component>标签必须配合i…

实战之快速完成 ChatGLM3-6B 在 GPU-8G的 INT4 量化和本地部署

ChatGLM3 (ChatGLM3-6B) 项目地址 https://github.com/THUDM/ChatGLM3大模型是很吃CPU和显卡的&#xff0c;所以&#xff0c;要不有一个好的CPU&#xff0c;要不有一块好的显卡&#xff0c;显卡尽量13G&#xff0c;内存基本要32GB。 清华大模型分为三种(ChatGLM3-6B-Base&…

海山数据库(He3DB)从方法到实践,构建以场景为中心的体验管理体系

编者按&#xff1a;体验优化的过程中设计师经常会遇到几个阶段&#xff0c;发现问题、定义问题、优化问题、查看反馈&#xff0c;但在产品快速迭代的过程中&#xff0c;体验的问题经常被归类到“不紧急”需求中&#xff0c;并逐步转为长尾问题&#xff0c;这些不被重视的问题聚…

区块链钱包如果丢失了私钥或助记词,资产还能恢复吗?

如果你丢失了区块链钱包的私钥或助记词&#xff08;通常是用于恢复钱包的短语或种子&#xff09;&#xff0c;那么你的资产在大多数情况下是无法恢复的。私钥是访问和控制你在区块链上资产的唯一凭证&#xff0c;而助记词&#xff08;如BIP39标准中的12、18、24个单词的短语&am…

​16种常用的数据分析方法-时间序列分析

​时间序列&#xff08;time series&#xff09;是系统中某一变量的观测值按时间顺序&#xff08;时间间隔相同&#xff09;排列成一个数值序列&#xff0c;展示研究对象在一定时期内的变动过程&#xff0c;从中寻找和分析事物的变化特征、发展趋势和规律。它是系统中某一变量受…

ARM|DSP+FPGA+NVIDIA AI摄像头定制

信迈拥有高性能的摄像头全栈能力&#xff1a;掌握车载模组光学设计能力&#xff0c;具有多名经验丰富光学设计专家&#xff1b;具备丰富的车载摄像模组硬件设计经验&#xff1b;掌握目前市面上大部分车载平台的ISP图像画质服务能力&#xff0c;能自主开发图像ISP和增强算法&…

网络流量分析与网络流量采集:深入了解与实用指南

目录 什么是网络流量分析&#xff1f; 网络流量采集的重要性 网络流量分析的常用方法 包捕获和解码 协议分析 流量统计与趋势分析 AnaTraf网络流量分析仪 应用场景与实际案例 企业网络性能监控 数据中心安全防护 了解更多 在当今数字化时代&#xff0c;网络流量分析…

Word怎么画图?这5个方法收藏好!

“我需要在Word文档中画一些图&#xff0c;想问下Word应该怎么画图呢&#xff1f;有没有朋友可以帮我看看怎么操作呢&#xff1f;” 在今天的数字化时代&#xff0c;信息爆炸式增长&#xff0c;人们越来越需要高效、直观地传递和接收信息。而Word画图功能正是这一需求的完美体现…

TSMaster发送CAN报文

打开TSMaster工程 从菜单栏打开CAN报文发送窗口&#xff1a;【分析】->【报文发送】->【添加CAN/CAN FD发送】 可以选择【从CAN数据库添加报文】或者是【添加新的原始报文】 方法一 添加新的原始报文 可以配置报文发送的触发方式&#xff0c;有【手动】和【周期】两种。…

【LeetCode算法】第69题:x的平方根

目录 一、题目描述 二、初次解答 三、官方解法 四、总结 一、题目描述 二、初次解答 1. 思路&#xff1a;第一次想到的是让i从1开始遍历&#xff0c;看i*ix是否成立&#xff0c;但是这样就会导致i*i超出了int的范围&#xff0c;无法正常求解。第二次&#xff0c;想着比较x/…

【css】引入背景图时候,路径写入@会报错

看报错信息 我的写法 解决办法 在前面加个~

表现层框架设计之表现层设计模式_3.MVVM模式

1.MVVM模式 MVVM模式正是为解决MVP中UI种类变多&#xff0c;接口也会不断增加的问题而提出的。 MVVM模式全称是模型-视图-视图模型&#xff08;Model-View-ViewModel&#xff09;&#xff0c;它和MVC、MVP类似&#xff0c;主要目的都是为了实现视图和模型的分离&#xff0c;不…

无线通信的穿墙能力主要取决于哪些指标

无线通信的穿墙能力是指无线信号在穿越建筑物墙壁时&#xff0c;其信号衰减程度以及能否维持足够强度以进行稳定通信的能力。穿墙能力的好坏直接影响到无线通信在室内环境中的覆盖范围和使用体验。 一、无线信号的频率 无线信号的频率是影响穿墙能力的重要因素之一。一般来说…

mybatisPlus-DB静态工具

方法跟mybatisplus的service接口非常像&#xff0c;静态工具可以避免依赖循环注入。

Github 2024-05-24 开源项目日报 Top10

根据Github Trendings的统计,今日(2024-05-24统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目3非开发语言项目2TypeScript项目2JavaScript项目1Kotlin项目1C#项目1C++项目1Shell项目1Microsoft PowerToys: 最大化Windows系统生产…