浏览器恢复滚动行为~了解一下

最新推荐文章于 2024-05-23 23:53:17 发布

weixin_34221073

最新推荐文章于 2024-05-23 23:53:17 发布

阅读量459

点赞数

原文链接：https://juejin.im/post/5affc88f6fb9a07acc11fa7f

版权

原文链接jsonz1993.github.io/2018/05/his…

今天给大家介绍的history不是讲那套state，而是一个简单的属性scrollRestoration

直入主题。之前做移动端的需求时，经常遇到一种常见，就是: a页面是一个长列表，我们滑动到某个地方假设为 100px ，点击之后进入到b页面再从b页面回到a页面，这时候浏览器的滚动条会自动回到我们跳转前的位置，也就是 100px 的位置。

浏览器记住滚动行为图不动刷新一下

这种体贴的行为我是很喜欢的~ 但是有时候产品就非要抬杠，说我就不想要这种行为，你给我回到顶部去(╯‵□′)╯︵┻━┻

以前没办法就经常用什么 setTimeout 大法去手动处理这些东西

氮素!!! 如果只是说setTimeout大法的话，就没我什么事了。今天要说的是 history.scrollRestoration ，这个属性是实验性的属性，他的作用是: 允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。

说的很明白了，如果浏览器支持 history.scrollRestoration并且值为auto则会默认恢复滚动行为。如果设置为 manual则可以取消，这个行为不用去考虑兼容性的问题，如果有这个功能才会有恢复滚动，所以直接判断一下就可以了。无需多考虑

window.history.scrollRestoration && (window.history.scrollRestoration = 'auto');
复制代码

以后妈妈再也不用担心我被产品怼了

google-developers 资料

mozilla-developer 资料

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34221073

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

ScrollRestoration react-router-dom V6

大赚万万亿

03-22

493

如A页面向下滑动一些后,点击跳转到B页面,然后在B页面点击标签回到A页面时,会在上次滑动的位置出现。在移动端使用搭配组件跳转时,可记录之前的滑动位置。浏览器自带的返回按钮不受影响,只影响组件互相跳转时恢复位置。实参matches里有上述handle的值,可加入自己的一些参数。在Test和About组件内加入以下代码,放在根div内即可。以下测试环境为微信内的浏览器。

window.history.scrollRestoration利用浏览器特性回到上一个页面滚动位置

weixin_45123004的博客

12-15

2154

回到上一个页面滚动位置

参与评论您还未登录，请先登录后发表或查看评论

再次学习History.scrollRestoration

最新发布

KazooTTT的博客

05-23

1337

本文重新探讨了浏览器History对象的scrollRestoration属性，该属性用于控制历史页面切换时滚动条是否恢复到之前的位置。scrollRestoration属性有两个可选值：auto和manual。当设置为auto时，滚动条会自动恢复到切换前的位置；若设置为manual，则滚动条保持在页面顶部。文章还讨论了该属性的局限性，包括可能导致的页面跳动和在不同浏览器中实现一致滚动恢复的困难。最后，文章建议在页面出现不美观跳跃或需要手动控制滚动条位置时，应将scrollRestoration设置为man

浏览器滚动恢复属性History.scrollRestoration

KazooTTT的博客

11-27

1114

最近在阅读React新版官网的代码时，发现在中有这样一段代码。这里用到了我没有接触过的一个属性History.scrollRestoration，发现这个属性是用来控制页面刷新或者返回后是否滚动到原来的位置。在mdn文档中没有看到auto是默认值，但是自己手动验证以及在中提到：所以auto确实是默认值没错。

history.scrollRestoration如何取消浏览器对页面滚动条位置的记录？

細水、長流√的专栏

06-01

827

history.scrollRestoration如何取消浏览器对页面滚动条位置的记录？

Vue 滚动行为的具体使用方法

08-29

Vue 滚动行为是 Vue.js 应用中与页面滚动相关的功能，特别是在结合 Vue Router 使用时，可以实现更精细的滚动控制。Vue Router 提供了一个名为 `scrollBehavior` 的配置选项，允许开发者自定义路由切换时的滚动行为...

Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置

10-16

这个特性使得在切换路由时，能够自定义页面滚动到特定位置，甚至在用户点击浏览器的前进/后退按钮时，页面能够恢复到上次浏览时的位置。首先，`scrollBehavior` 是一个函数，它可以被定义在路由器实例配置中，或者...

向上滚动到浏览器顶部固定住，向下滚动出浏览器顶部回复原状

08-10

我们可以使用`window.onscroll`事件监听滚动行为，并通过`window.pageYOffset`获取当前的滚动位置。如果滚动位置超过一定阈值，就添加`stick-to-top`类；反之，移除该类，使按钮恢复原状。以下是一个简单的...

js阻止移动端页面滚动的两种方法

10-20

在移动设备上，当用户在页面中进行交互时，有时我们需要阻止页面的默认滚动行为，以便实现特定的交互效果，例如弹出模态框、滚动锁定等。本文将详细介绍两种JavaScript方法来阻止移动端页面的滚动。 ### 方法一：...

解决Vue页面固定滚动位置的处理办法

08-30

这样可以确保浏览器恢复到正确的滚动位置。解决方案： 1. 使用keep-alive组件来解决浏览器的滚动位置恢复行为。 2. 在hashchange事件触发时，拿到当前页面的document.body.scrollTop值，并与自己存储的滚动条位置...

javascript--34--默认行为和滚动事件

lxhby520的博客

07-04

615

默认行为移动端用的多默认行为：选中复制选中文本事件document.onselectstartdocument.onselectstart = function(){ console.log("选中"); } 每选择一次在控制台打印一次右键点击出现菜单document.oncontextmenudocument.oncontextmenu = function(e){ ...

vue-router 官方文档学习

qq_36723759的博客

04-02

5059

安装 npm install vue-router 简单使用 # 在 main.js 文件中 import Vue froom 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter); import User from '@/views/User' import Login from '@/views/Login' let vueRouter = new VueRouter({ routes: [ { path: "/"

完全解决ios页面返回半截白屏或全白屏问题的方法

callbackkkkkk的博客

07-14

2559

问题描述：列表页面——>详情页面——>ios自带的返回——>白屏手动点击白屏处——>问题解决；原因是，发现在ios 机器上使用webview 开发Vue项目时候，go history (-1)，无法将body 的高度拉掉，使得遮住，触发轻点击，方可消除该遮罩解决1.history.scrollRestoration='manual'; 原理：更改history对象的默认滚动属性值 History.scrollRestoration 定义：允许web应用程序在历史导航上显式

HTML5新特性history

weixin_43613849的博客

10-29

705

history 1、history.pushState() 2、history.replaceState(） replace比起push的差异在于，push是进栈把当前页面放在栈中，但是replace是会直接取代当前页面。 3、history.go() history.back() 等价于 history.go(-1) history.forward() 则等价于 history.go(1) 这三个接口等同于浏览器界面的前进后退。 ...

禁用滚动条记忆功能

web开发、技术交流、学习笔记、开发心得

11-01

610

先贴代码： history.scrollRestoration = 'manual'; 问题描述： 浏览器的滚动条记录功能，在刷新页面时，能继续停留在刷新前的位置，以方便用户操作。但是某些情况下，我们需要手动定位滚动条位置，这个时候此功能就显得比较烦人了，通过脚本设置之后，浏览器将不再自动定位滚动条。参考：https://stackoverflow.com/questions/10...

h5在iOS上，回退页面，出现白屏，滑动页面，页面正常展示

swallow_y的博客

12-11

2449

问题：h5在iOS上，回退页面，出现白屏，滑动页面，页面正常展示 scrollRestoration 描述：h5在ios上，第一个页面超过一屏，点击进入第二个页面，第二个页面滑动超过一屏时，返回第一个页面时，第一个屏幕有一块白的盖在上面，滑动页面，白屏消失，页面正常展示。这块白的是第二个页面滚动的部分，盖在第一个屏幕上了。解决方法：window.history.scrollRestoration会记录上一个页面滚动的位置。值：auto,将恢复用户已滚动到的页面上的位置; manual,未还原页上的位置。

简单盘点浏览器的几种滚动行为(笔记亲测有效)

jjsnc

03-12

1331

让页面或元素的滚动如丝般柔滑 scroll-behavior: smooth | auto; // 实现 html, body { scroll-behavior: smooth; } 二， .scroll()、 .scrollTo()、 .scrollBy()、 .scrollIntoView() scroll(x, y)、 scrollTo(x, y)、 scrollBy(x, y)标...

iOS H5 history.back() 返回上一路由页面白屏

yujin0213的博客

09-08

5688

问题描述最近在做H5项目的时候，发现使用history.back()在IOS上返回上一页的时候，会有很严重的bug。我的场景是列表页滚动了超出一屏之后，进入详情页，再点击返回列表页，在iOS上就出现了白屏的现象，但是触屏或者滑一下，页面就又恢复了。解决方案 1、使用绝对定位这个也是参考了网上的写法，把列表页高度设为100%，绝对定位 .container { positio...

History API:ScrollRestoration

weixin_30687811的博客

06-20

428

By Paul Lewis(设计和性能倡导者) 翻译：江天使用history api管理url是非常棒的一件事，可以说这是一个好web app的极为重要的特点。但它有一个缺点，滚动位置虽然被存储但更重要的是，当history来回循环的时候的存储。这种情况往往意味着当滚动位置自动改变的时候很难看的跳转，特别是当你的app发生变迁，或者是页面内容发生了任何改变，基本上都会导致非常糟糕的用户体验...

如何开启Safari 浏览器的默认滚动

06-08

如果你想要在 iOS Safari 浏览器中开启默认滚动行为，可以通过移除先前添加的禁止滚动的代码来实现。例如，你可以使用以下代码来移除之前添加的事件监听器...移除事件监听器后，Safari 浏览器将会恢复默认的滚动行为。