首页 > 其他分享 >如何实现页面刷新后不定位到之前的滚动位置?

如何实现页面刷新后不定位到之前的滚动位置?

时间:2024-03-22 17:55:55浏览次数:19  
标签:滚动 位置 manual scrollRestoration 刷新 页面 history

1.scrollTop

scrollTop 为 0

2.history.scrollRestoration

使用很简单,在页面的任意位置执行下面几行 JS 代码就可以了:

if (history.scrollRestoration) {
  history.scrollRestoration = 'manual';
}

语法和兼容性

history.scrollRestoration 支持下面两个属性值:

auto
默认值,表示滚动位置会被存储。
manual
单词的意思就是手动。表示,滚动的位置不会被存储。

兼容性

 

标签:滚动,位置,manual,scrollRestoration,刷新,页面,history
From: https://www.cnblogs.com/Simoon/p/18090195

相关文章

  • 使用 Pyqt5 GUI 页面请求 FastAPI 后端 API,实现逻辑功能
    使用PyQt5+FastAPI+SQLAlchemy+Redis+Celery做一个登录注册页(四)本文将介绍用PyQt5+FastAPI+SQLAlchemy+Redis+Celery做的一个登录注册页,使用邮箱接收验证码,本文介绍是前后端分离的实现方式,厚后端使用FastAPI+SQLAlchemy+Redis+Celery,你可以将PyQt5改为PySide2以获得更宽松......
  • vue或react项目上线刷新出现404的原因以及解决办法
    问题描述:vue/react项目,正常的页面操作跳转,不会出现404的问题,但是一旦刷新,就会出现404报错。产生原因:我们打开vue/react打包后生成的dist文件夹,可以看到只有一个index.html文件及一些静态资源,这个是因为vue/react是单页应用(SPA),只有一个index.html作为入口文件,其它的路由都是通......
  • uniapp开发ios,scroll-view横向滚动失效,动态获取scroll-view内部子容器总宽度,然后添加
    这是老bug了,官方一直没有解决掉。已经摸索到完美解决方案,遇到这个问题的可以看下。本文以三级导航页面中的二级横向滚动导航为例,说明如何做到不同宽度子元素的横向滚动。bug定位:本来横向滚动只要子元素宽度大于scroll-view固定宽度就可以滚动的,但是IOSApp开发中子元素高度必须......
  • uni-app/小程序自定义导航栏下拉刷新loading图标看不到问题解决
    实际效果图 我们在page.json中开启了自定义导航栏属性和下拉刷新属性后//开启下拉刷新"enablePullDownRefresh":true//自定义导航栏"navigationStyle":"custom"此时,页面中的下拉刷新三个小圆点会被我们的导航栏遮盖住,导致用户下拉刷新看不到loading效果,如下图:......
  • Android 设置相关页面
    Android设置相关页面本文主要记录下android中跳转设置相关页面的一些action.在android中,我们一般使用intent+指定的action来跳转相关设置页面.1:WLANAction设置为Settings.ACTION_WIFI_SETTINGS,用户可以跳转wifi设置页面.Intentintent=newIntent(Settings.ACTION......
  • SLF4J记录日志&&日志文件的滚动策略__SpringBoot
    Logback是Log4j的作者的另一个开源日志组件,与Log4j相比,Logback重新了内核,使它的性能提升了很多,大约是Log4j的10倍,同时占用更小的内存,并且完整的实现了SLF4JAPI是你可以很方便的切换日志框架。SpringBoot默认集成了Logback,可以开箱即用,对于中小型项目,个人更倾向于......
  • uniapp编辑页修改数据后返回到列表页(上一页)或首页,列表页或首页数据不刷新问题
    uniapp编辑页(当前页)等修改数据后返回到列表页(上一页)或多次返回上一页到首页(非上一页),列表页或首页数据不刷新问题解决方法:一、返回到列表页(上一页)1、首先在编辑页的修改数据的成功回调中调用uni.$emit('refreshData');向上一页传递refreshData事件2、然后在列表页(上一......
  • nicerefresh--自动刷新Spring中@Value的值
    nicerefresh:自动刷新Spring项目中@Value的值。@RefreshScope虽然有这个功能,但是,它在很多场景下会失效!而nicerefresh就是为了解决这一问题而产生的。用了nicerefresh,不需要加任何注解,即可自动刷新配置!官网:https://www.yuque.com/knifeblade/opensource/nicerefreshgitee:https://......
  • vue入门小案例(表单收集单页面)
    实例在Vue中创建一个表单收集页面,可以使用v-model来实现双向数据绑定,以便收集和处理用户输入的数据。以下是一个简单的示例,包含文本输入、选择框和单选按钮的表单页面<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"conten......
  • 移动端 页面适配 原生js及lib-flexible 插件
    1.js原生;(function(win,doc){change()functionchange(){varremSize=window.innerWidth/7.5||50/*设计稿是以width=750px为基准的*/document.querySelector('html').style.fontSize=(remSize>100?100:remSize)+'px'}......