JS实现页面滚动到关闭时的位置与不滚动效果
作者:恪愚 发布时间:2024-04-10 10:47:56
标题显而易见,要说两种情况:重新打开页面或者返回某个页面时滚动到上次离开时的位置,以及不滚动保持在顶部。
滚动
这也有两种情况:页面重新打开,与返回某个页面。
如果是前者,必定用cookie
或者localStorage
。或者麻烦一点的、在webview中用其他手段。总之这个必须有存储。
然后在组件的activited
或是window.onload
时取出存储内容改变scrollTop
。非常牛逼。
对于原生页面,如果在关键位置没有图片和表格,可以尝试在
onreadystatechange
中完成,不必等到onload
。
关于这点,背景和降级处理等具体可以参考笔者的这篇文章:点击跳转
若是第二种情况,则只需要临时缓存即可,这里拿vue演示一下:
有两个方案。其一,利用路由中的meta
,在离开页面时缓存 top 信息
// router/index.js
{
path: "/user",
name: "user",
component: () => import("../views/user.vue"),
meta: { scrollTop: 0, keepScroll: true }
},
// ...
router.beforeEach((to, from, next) => {
// 记录需要缓存页面的滚动条高度
if (from.meta.keepScroll) {
const $content = document.querySelector("#app");
const scrollTop = $content ? $content.scrollTop : 0;
from.meta.scrollTop = scrollTop;
}
next();
});
然后在回到当前页面时拿到临时缓存,并赋值
// utils/index.js
export const getScroll = vm => {
const scrollTop = vm.$route.meta.scrollTop;
const $content = document.querySelector('#app');
if (scrollTop && $content) {
$content.scrollTop = scrollTop;
}
};
组件内
import * as util from '@/utils/';
//...
activeted() {
// 保持滚动条
util.getScroll(this);
}
其二,利用keep-alive
缓存整个页面。但是仅限于没有实时数据变动的页面
<template>
<div id="app">
<keep-alive >
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
路由配置里 在需要被缓存的页面meta里配置keepAlive属性
{
path: '/index',
name: 'index',
meta: {
title: ' ',
keepAlive: true,//此组件需要被缓存
},
component: () => import('@/components/index'),
},
组件内在beforeRouteLeave
钩子函数中,将该页面的 keepAlive 属性设为false
beforeRouteLeave (to, from, next) {
from.meta.keepAlive = false;
next();
},
然后需要在下一个页面进行配置,页面返回时设置上一个页面的 keepAlive 为true
beforeRouteLeave (to, from, next) {
if (to.path == "/index") {
to.meta.keepAlive = true;
} else {
to.meta.keepAlive = false;
}
next();
},
不滚动
其实有的页面我们会发现,体验下来觉得并不想让重新进入时回到上一次浏览的地方。
理论上说这里不加上面提到的各种方法不就行了?其实不然。
「重新进入」也分两种情况:重新打开这个页面,和刷新页面。
前者大可不必关心。对于后者,在比如QQ内置浏览器中,短时间内重新打开相同页面的逻辑和普通刷新是一样的。
在浏览器中,普通刷新会“记住”用户上次的位置似乎是个惯例了。如何在页面刷新时保持在顶部呢?
浏览器提供了history
API实现。其兼容性还算不错,除了IE外基本目前使用的浏览器都可以使用了。
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
}
强制刷新(CTRL + F5)不会“记住”用户位置
来源:https://blog.csdn.net/qq_43624878/article/details/125111041
猜你喜欢
- 所以特意写了这个配置文档,相信按照以下步骤你一定会成功的.错误的地方也希望各位指正. 本例是在wiondws XP下 php5.2.1(zi
- 即使在不太复杂的样式表中,也可能会有两个或者更多个规则找到同一元素。CSS通过一个叫做层叠(cascade)的过程处理这种冲突。
- 一、表单验证form1、创建一个新的表单:<form id="id是唯一的,不可重复" name=“可重复”,me
- 在开发django应用的过程中,使用开发者模式启动服务是特别方便的一件事,只需要 python manage.py runserver 就可
- MASK图像掩膜处理在图像操作中有时候会用到掩膜处理,如果使用遍历法掩膜图像ROI区域对于python来讲是很慢的,所以我们要找到一种比较好
- MySQL 8.0.29 详细安装(windows zip版),供大家参考,具体内容如下1 官网官网地址:MySQL2 下载下载地址:MyS
- 一、c++调用Python将Python安装目录下的include和libs文件夹引入到项目中,将libs目录下的python37.lib复
- python 中datetime中strptime用法,具体代码如下所示:import datetimeday20 = datetime.d
- 思路步骤:创建一个可以序列化的类去数据库取数据交给序列化的类处理把序列化的数据返回前端操作流程:# 安装模块pip install djan
- 1.问题背景Python之所以强大,不仅是因为该语言本身的特点,也是因为它拥有众多无所不能的第三方库。强大的软件库允许开发者专注于业务,避免
- 1. 永远不要停止学习和阅读 阅读 书籍,而不只是网站 阅读 只为自我提升,而不是为了下一个项目 阅读 提升你的基础,而不只是最新技术 2.
- 1、简述asp的6个内置对象和其功能答案 : session ,server ,response,request,objectcontext
- os模块提供了对目录或者文件的新建/删除/查看文件属性,还提供了对文件以及目录的路径操作。比如说:绝对路径,父目录…… 但是,o
- 示例下面是一个简单的Python爬虫Scrapy框架代码示例,该代码可以抓取百度搜索结果页面中指定关键字的链接和标题等信息:import s
- 制作NBA数据爬虫捋顺思路我们在这里选择的是百度体育带来的数据,我们在百度当中直接搜索NBA跳转到网页,我们可以看到,百度已经为我们提供了相
- 导语在大多数开发需求中,我们有时需要将某个数据,或者某个函数方法,挂载到,全局实例身上,以便于,在项目全局的任何位置都能够调用其方法,或读取
- 背景上周公司培训了MySQL replication, 这个周末打算用所学来实践操作一下。Master server:MySQL conta
- Django中的中间件是一个轻量级、底层的插件系统,可以介入Django的请求和响应处理过程,修改Django的输入或输出。中间件的设计为开
- 我就废话不多说了,大家还是直接看代码吧!stdi, stdo, stde = sys.stdin, sys.stdout, sys.stde
- 在web开发中经常遇到多关键词对对单个字段查询,我一般是通过动态数组来实现的。当然多个关键词的一般是用空格或,隔开,我这几假设多个关键词用空