首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当重新加载一个页面时,它是如何自动保留页面的滚动位置的?

当重新加载一个页面时,页面的滚动位置可以通过以下几种方式自动保留:

  1. 使用浏览器的缓存机制:浏览器会将页面的一些数据缓存在本地,包括滚动位置。当重新加载页面时,浏览器会尝试从缓存中恢复页面的状态,包括滚动位置。
  2. 使用JavaScript和浏览器的API:开发者可以使用JavaScript和浏览器的API来保存和恢复页面的滚动位置。例如,可以使用window.scrollY获取当前页面的滚动位置,并将其保存在浏览器的本地存储(如localStorage或sessionStorage)中。当页面重新加载时,可以从本地存储中读取滚动位置,并使用window.scrollTo将页面滚动到相应位置。
  3. 使用URL参数:开发者可以将当前页面的滚动位置作为URL参数传递给重新加载的页面。例如,可以将滚动位置作为锚点(anchor)添加到URL中,如http://example.com/page#scroll=200。重新加载页面时,可以通过解析URL参数获取滚动位置,并使用JavaScript将页面滚动到相应位置。

总结起来,页面重新加载时自动保留滚动位置可以通过浏览器的缓存机制、JavaScript和浏览器的API以及URL参数等方式实现。具体的实现方式可以根据具体的需求和技术栈选择适合的方法。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【交互探讨】无限滚动还是分页展示,这是个问题!

(通常不会成功) 最重要是,无限滚动会破坏滚动条,因为每次滚动都必须重新校准用户对页面长度预期。滚动条是对页面实际长度预示,但是对于新加载项目,预示总是错误。...在一些实际案例中,当用户开始向下滚动,先是会自动出现更多项目,一旦浏览内容数量达到某个阈值,就会出现“加载更多”按钮。 Crutchfield 上使用加载更多”模式。...例如,我们可以在初始页面加载显示10-30个产品项目(移动设备上显示10个,桌面设备上显示30个)。当用户到达列表末尾,我们可以自动加载接下来10-30个产品。...一个基于 Crutchfield UI 模型。 页脚显示 上面的解决方案可能会解决了对用户所在位置缺乏了解问题,但由于项目会自动加载,我们仍然存在一些其他问题——例如到达页脚。...就像我们习惯于使用粘性头部一样,我们可以集成一个页脚显示:一个小助手,它会保持在右下角栏中,并在需要显示页脚,而页面的其余部分使用无限滚动

3.1K20

关于如何一个“优秀网站”清单——规范篇

下面是优酷首页加载过程,在内容全部加载完成前,先用展位符来展示,而不是白,这样大大提升了用户体验。...从详细信息页面返回,保留一个列表页面滚动位置 确认方法:在应用程序中查找列表视图。向下滚动点击一个项目进入详细页面。在详细页面滚动。...按返回,确保列表视图滚动到与细节链接/按钮被点击之前相同位置。 改善方法:当用户按“返回”,恢复列表中滚动位置。有些路由库可以帮你完成这个功能。...下面是天狗网页面,在列表中点击详情后,再后退返回列表,列表仍然能滚到上次进入位置 点击,输入框不会被屏幕键盘遮蔽 确认方法:找到一个包含文本输入页面。...滚动页面,将文本输入框放在屏幕上尽可能低位置。点击输入并确认键盘出现时没有覆盖输入。

3.2K70

干货|小程序性能优化几点实践技巧

本文首先论述下如何评判一个小程序页面的性能情况,之后通过具体案例重点讲解下几点实践技巧,最后再讲讲key值在渲染一个列表发挥了一个怎么样作用,以此来论述为啥key值对性能提升有帮助。...,一开始处理方式都是这样,如果数据不多,只有几页可能不会太暴露问题,如果页数过多,几十甚至上百情况,list数据会越来越大,每次setData数据就会越来越多,因而每次页面重新渲染节点就会越来越多...所以在渲染页面,不在视图范围内图片我们不加载,只有元素出现在视图范围内了,再渲染。...,系统会自动去监听了元素位置。...、更新值)等操作 ③最后再将vdom渲染成真实页面结构 key值作用就在第二步,数据改变触发渲染层重新渲染时候,会校正带有 key 组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身状态

1.4K20

iOS新闻类App内容技术探索

如何页面中合理处理WebView与扩展区中多种View协同滚动,灵活扩展,并且支持下拉刷新、上拉加载等操作,不同新闻类App也有不同技术方案。 1....这样就隐藏了复杂实现逻辑和边界条件,充分保留了灵活性特点。同时对于内容使用场景,精简了嵌套滚动使用,扩展上拉加载更多及下拉刷新逻辑,使整个方案实现简单、灵活扩展。 3....View滚动状态简单: 滚动位置计算,最简单方式就是根据屏幕高度计算是否进入屏幕,对于预加载需求,绝大部分开源框架也是只是在屏幕区域上下增加了Buffer,仍然不能区分具体状态,如进入buffer...WebView字体大小调整 WebView中字体大小调整,需要同时调整全部Native组件位置。...我们监听WebViewContenSize变化,变化发生重新执行获取组件位置JS语句获得全部组件位置

2.9K00

3分钟搞定图片懒加载

为什么需要懒加载 对于一个页面加载速度影响最大因素之一就是图片资源,如果一个页面图片太多(比如某宝,某东等),整个页面的图片大小可以到达几百兆,即使在百兆宽带,全部下载的话,也需要上十秒时间,这对于用户耐心考验是巨大...而且,用户可能只翻看一两就退出了,剩下未查看图片也就不需要加载了。这也相当于节省了带宽资源。 懒加载实现原理 由于浏览器会自动页面img标签src属性发送请求并下载图片。...如何判断一个元素是否在视口内呢? 通过getBoundingClientRect()方法来获取元素大小以及位置。...随着滚动向下滚动,bound.top会越来越小,也就是图片到可视区域顶部距离越来越小,bound.top =1会返回相应页码数据。 源代码: <!

2.4K20

Meteor 分页包 alethes:pages 详解

仅 subscribe 当前需要数据,并不是一次性 sub 所有数据 本地缓存,获取过数据本地存储,避免返回重新获取 在加载当前过程中,预取下一数据,确保下一时候无缝过度 多个集合产生一个分页数据...个性化 但具体每页显示多少数据、显示数据样式如何定义、分页导航按钮能不能换成滚动屏幕自动加载瀑布流方式?等等类似的问题,这个包都提供了解决方案。...第一个问题就是滚动滚动到 0.8 位置后,数据不会自动继续加载。...修正了第一个问题后,随后出现问题滚动条并非到 0.8 位置加载数据,而是我滚动条只要一动,下一数据就自动加载出来了,这样明显不对。...div 当作 body 来用,滚动时候实际 div 滚动条在滚动,而 body 滚动条一直在 0 位置,所以无论你看到 div 滚动滚动到了哪里,下一组数据都不会继续加载

19420

H5 页面列表缓存方案

但刚才说都是 App,在原生 App 中,页面是一层层 View,盖在 LastPage 上,天然就能够保存上一个页面的状态,而 H5 不同,从详情返回到列表后,状态会被清除掉,重新走一遍生命周期,...,而不是重新请求数据,停留在离开列表浏览位置;或者是能够像 App 那样,将页面一层层堆叠在 LastPage 上,返回时候展示对应页面,这样用户体验会好很多,本文简单介绍一下在自己在做列表缓存时候考虑几点...因此,当用户从详情退回到列表,会重新加载列表页面组件,重新走一遍生命周期,获取就是第一数据,从而回到了列表顶部,下面是常用路由匹配代码段。...-> Detail -> List 需要缓存没问题,但是用户从 List 返回到其他页面后再次进入 List ,是进入一个页面,从逻辑上来说就不应该在用之前缓存数据,而是重新获取数据。...何时取 在进入缓存页面的时候取,取时候又有几种情况 导航操作为 POP 时取,因为每当 PUSH ,都算是进入一个页面,这种情况是不应该用缓存数据。

1.5K20

微信小程序性能优化总结

; 分包加载 将小程序中不经常使用页面放到多个分包内,主包是保留最常用核心页面;启动加载主包,使用时按需下载分包; 使用分包加载会出现用户首次进入分包页面需要进行分包下载和注入,造成页面切换延迟...,几十甚至上百情况,list数据会越来越大,每次setData数据就会越来越多,因而每次页面重新渲染节点就会越来越多,从而导致滚动到后面,加载越来越慢。...要实现这一效果,我们可以通过 getBoundingClientRect() 获取元素位置,然后与页面滚动位置进行比较,如果出现在视图内就加载显示图片。...在小程序开发中,页面的渲染主要分为以下几步: 将wxml结构文档构建成一个vdom虚拟数。...key值作用就在第二步,数据改变触发渲染层重新渲染时候,会校正带有 key 组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身状态,并且提高列表渲染效率。

2.1K20

京东购物小程序购物车性能优化实践

CPU 利用率:CPU 利用率达到饱和容易导致页面白屏或闪退 网络请求数:短时间发起太多请求会触发小程序并行请求数量限制 分析工具 1、Performance monitor 它是小程序开发工具内置一个可视化监控工具...通过多次实验发现,首屏渲染商品数5 ,首屏渲染耗时会上升一个梯度。 结论:需进一步优化渲染策略,尽可能减少首屏渲染商品数。...分屏渲染与自动分页渲染对比 移除 scroll-view scroll-view 组件是一种滚动视图容器,它提供了一个名为 scroll-into-view 功能,可以使视图滚动到指定元素,为方便描述...滚动优化前后对比 数据预加载 指提前请求数据,打开页面后使用预请求数据渲染 1、分类: 跳转加载:即将发生页面跳转请求数据 预判预加载:预测用户从页面 A 进入页面 B 可能性大,在 A 内主动请求...再次打开购物车,只要满足一定条件,就可以直接使用这份缓存数据渲染页面。 ? 2、效果对比 缓存模式首屏时间比常规模式(页面 onLoad 加载数据)快 44%,比预加载模式快 23%。

2.1K21

京东购物小程序购物车性能优化实践

CPU 利用率:CPU 利用率达到饱和容易导致页面白屏或闪退 网络请求数:短时间发起太多请求会触发小程序并行请求数量限制 分析工具 1、Performance monitor 它是小程序开发工具内置一个可视化监控工具...通过多次实验发现,首屏渲染商品数5 ,首屏渲染耗时会上升一个梯度。 结论:需进一步优化渲染策略,尽可能减少首屏渲染商品数。...分屏渲染与自动分页渲染对比 移除 scroll-view scroll-view 组件是一种滚动视图容器,它提供了一个名为 scroll-into-view 功能,可以使视图滚动到指定元素,为方便描述...滚动优化前后对比 数据预加载 指提前请求数据,打开页面后使用预请求数据渲染 1、分类: 跳转加载:即将发生页面跳转请求数据 预判预加载:预测用户从页面 A 进入页面 B 可能性大,在 A 内主动请求...再次打开购物车,只要满足一定条件,就可以直接使用这份缓存数据渲染页面。 ? 2、效果对比 缓存模式首屏时间比常规模式(页面 onLoad 加载数据)快 44%,比预加载模式快 23%。

2.7K21

用这些 iOS 技巧让你 APP 性能更佳

通过将屏幕上不再可见 tableViewCell 放入队列中进行复用,并且新 tableViewCell即将在屏幕上可见(例如,当用户向下滚动,下面的后续tableViewCell),表视图将从此队列中检索...如 Apple 所述,应将启动设计为与应用一个页面相同: 「设计一个与应用程序首页几乎相同启动。...如果你应用程序在完成启动后包含着与启动看起来不同元素,那么用户则可能会在启动到应用程序一个页面的过程中感到令人不快闪屏。」 「启动并不是一个做品牌推广机会。...避免将程序入口设计成类似启动页面或者“关于”页面的感觉。不要包含徽标或其他品牌元素,除非它们是应用程序第一个页面的静态部分。」...当应用程序加载视图控制器和布局,将向用户显示此页面

3.2K30

微信小程序实践:2.3 可滚动容器组件之 scroll-view

5,如果一个瀑布流页面中有许多图,上面的图比下面的加载慢,看到下面图时候,上面的图突然加载出来,把下面的图挤跑了,这种情况有没有办法解决?是什么技术?...假设我们有一个图片瀑布流页面,这样页面在网站上有许多,随处在一个设计网站上都可以看到。 用户浏览瀑布,假如由于网速原因,在看下面的图片时,上面的图片突然加载出来。...微信小程序scroll-anchoring这个属性,就是干这个用它是一个布尔属性,添加它以后,当上面内容扩充,微信会自动向上滚动一段扩充距离。这就是「滚动锚定」策略。...假设在某个后台vue项目中,如果恰巧某个滚动实体监听了滚动事件,在滚动发生自动干了一个改变滚动内容事。...这里主要需要实现两个功能: 单击左侧菜单,右侧滚动到相应位置 在右侧滚动,左侧菜单自动同步高亮 第一个功能点,可以通过scroll-into-view属性实现,将左侧菜单与右侧每块区域id对应起来,单击更新

14.6K30

如何实现高性能在线 PDF 预览

上面我们已经将第一个分片进行了展示,但是当用户进行滚动,我们需要更新内容显示。...首先根据滚动位置,计算出当前需要展示页面,然后下载包含该页面的分片。...这里有一个前提,就是我们假定所有的 PDF 页面大小是一样,但在实际场景中,很可能出现同一个 PDF 文档中,页面大小不一样情况。这时就会出现加载页面位置不准确或者内容展示被遮挡情况。...针对上述问题,目前我们思考了两种方案: 将大小不一样页面进行缩放。当我们发现页面大小和保存 pageSize 不一致,可以将当前进行缩放,这样就将所有页面的大小转化成了一样。...但是这样做用户体验会有所影响,因为用户看到页面内容大小可能和他实际上传不一样。 可以在服务器上提前计算好每一页面大小,返回给前端。前端在渲染指定,根据服务器返回数据进行来计算页面位置

6.4K53

墨瞳漫画h5一期 vuejs总结

构建单页面大型应用的话,肯定要开启组件缓存,因为一般会要求后退时候不要重新加载页面,而且要记住原始滚动位置。...,比如 漫画详情页面一个路由带参数组件,参数变化时,router会重用这个组件,而不是重新请求数据,这显然是不符合要求,所以正确姿势是: 首先,用一个字段保存这个路由参数, 用router钩子函数...第二个坑就是关于缓存页面浏览位置纪录,router是通过html5 historypushState来纪录当前滚动位置,切换路由时候,把当前位置push进去,用户后退,会触发onpopstate...所以告诉我们,子页面路由参数变化时候,要把滚动条人工弄到最上面,要不然就会滚动到入口页面的浏览位置。也就是watcher里还要加一句如上滚动。...所以离开页面的时候,需要在路由deactivate钩子函数里把滚动关掉,再次进入页面的时候再开启(路由无变化在data钩子函数里开启,有变化的话在watcher里开启,如果不需要在路由改变向子组件延时传递参数也可以都在

1.1K10

webapp开发实战_html5开发手机app实例

但是从DOMContentLoaded来看,首页事实上页面响应比较迅速,所以这个加载结束后页面第一屏便渲染结束,然后再异步加载js,js改变后再动态改变dom结构中一些关键点 这个时候一个静态HTML...页面,装载首屏基本内容,让首页快速显示 然后js加载结束后会马上重新渲染整个页面,这个样子,用户就可以很快看到页面响应,给用户一个错觉,给人感觉快得多。...,其它页面访问再请求,若是想提升首屏加载便可以只下载需要页面文件。...,暂时没有完美的解决方案,问题二便与渲染直接关联 滚屏页面上所有的像素会跟着滚动,显卡对全屏幕上下移动处理很快,但是若是出现一个fixed元素或者有元素不跟着一起滚动,那么滚动对手机浏览器来说就是一个负担...webapp模式,完全依赖于浏览器垃圾回收,基本就是作死,因为传统页面一旦刷新页面整个资源完全释放,而webapp没有刷新这类操作,只有一个状态到两一个状态,不相关内存会保留,资源必须手动释放,或者说

1.9K20

webApp开发心得「建议收藏」

但是从DOMContentLoaded来看,首页事实上页面响应比较迅速,所以这个加载结束后页面第一屏便渲染结束,然后再异步加载js,js改变后再动态改变dom结构中一些关键点 这个时候一个静态HTML...页面,装载首屏基本内容,让首页快速显示 然后js加载结束后会马上重新渲染整个页面,这个样子,用户就可以很快看到页面响应,给用户一个错觉,给人感觉快得多。...,其它页面访问再请求,若是想提升首屏加载便可以只下载需要页面文件。...,暂时没有完美的解决方案,问题二便与渲染直接关联 滚屏页面上所有的像素会跟着滚动,显卡对全屏幕上下移动处理很快,但是若是出现一个fixed元素或者有元素不跟着一起滚动,那么滚动对手机浏览器来说就是一个负担...webapp模式,完全依赖于浏览器垃圾回收,基本就是作死,因为传统页面一旦刷新页面整个资源完全释放,而webapp没有刷新这类操作,只有一个状态到两一个状态,不相关内存会保留,资源必须手动释放,或者说

82440

uni-app中使用scroll-view滚到底部多次触发scrolltolower

,因此为了页面的数据加载顺畅决定使用上拉加载(简单说就是数据分页显示)。..., deltaX, deltaY} 二、问题: 第一个考虑上拉加载事件:onReachBottom页面滚动到底部事件,常用于上拉加载下一数据。...第一个问题就是滚动滚动到底部时会多次触发scrolltolower事件,第二个问题是页面由第一个scroll-view(该页面已经到了最底部了)切换到第二个scroll-view时会自动滚动页面的最底部...切换到第二个scroll-view时会自动滚动页面的最底部:   设置一个scrollTop设置竖向滚动位置,首先默认为0,页面向下滚动会触发scroll-top事件从而改变scrollTop值...,切换到第二个scroll-view在默认设置scrollTop为0,那么在切换到第二个页面的同时页面的竖向滚动位置会默认滚动到最顶部,从而解决了默认滚动到最底部加载多次数据问题。

7.4K10

面试官问:如何判断一个元素是否在可视区域?

面试官问:如何判断一个元素是否在可视区域? 最近在参加面试找工作,陆陆续续面了两三家。其中一个面试官问到了一个问题:如何判断一个元素是否在可视区域?...image.png 页面发生滚动时候,它们会随之改变。...它是一个数组,每个成员都是一个门槛值,默认为 [0],即交叉比例(intersectionRatio)达到 0 触发回调函数。...应用场景 「图片加载」 有时,我们希望某些静态资源(比如图片),只有用户向下滚动,它们进入视口加载,这样可以节省带宽,提高网页性能。...「列表无限滚动」 无限滚动,最好在页面底部有一个尾栏。一旦尾栏可见,就表示用户到达了页面底部,从而加载条目放在尾栏前面。

2.8K21

小程序优化36计

加载是预加载页面框架结构,这里分几步: 第一步,对于小程序里相对固定(稳定)页面结构框架(如首页一般是顶部tab,运营位,列表这样结构),先预留位置。...页面的DOM结构越复杂(建议DOM节点控制在6层、2k-3k个以内),数量越多,浏览列表越长,抖动越明显。 使用 page 滚动能力替换scroll-view 组件是一个不错选择。...但使用过程中发现,page滚动一个明显问题: 1)page滚动是带动画长列表滚到后面,前面的列表数据有可能会回收。...同样,当在同一个页面的tab来回切换,我们也使用这种【短延时】方案加载一个tab数据,做到秒切tab。...2)页面的弹窗不得不使用scroll-view,存在划动穿透问题,也就是弹窗scroll-view滚动,底部页面会跟着滚动

2K80
领券