JS實現(xiàn)頁面滾動到關(guān)閉時的位置與不滾動效果
標(biāo)題顯而易見，要說兩種情況：重新打開頁面或者返回某個頁面時滾動到上次離開時的位置，以及不滾動保持在頂部。
滾動
這也有兩種情況：頁面重新打開，與返回某個頁面。
如果是前者，必定用cookie或者localStorage?；蛘呗闊┮稽c的、在webview中用其他手段?？傊@個必須有存儲。
然后在組件的activited或是window.onload時取出存儲內(nèi)容改變scrollTop 。非常牛逼。
對于原生頁面，如果在關(guān)鍵位置沒有圖片和表格，可以嘗試在
onreadystatechange中完成，不必等到onload。
關(guān)于這點，背景和降級處理等具體可以參考筆者的這篇文章：點擊跳轉(zhuǎn)
若是第二種情況，則只需要臨時緩存即可，這里拿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();
});然后在回到當(dāng)前頁面時拿到臨時緩存，并賦值
// utils/index.js
export const getScroll = vm => {
const scrollTop = vm.$route.meta.scrollTop;
const $content = document.querySelector('#app');
if (scrollTop && $content) {
$content.scrollTop = scrollTop;
}
};
組件內(nèi)
import * as util from '@/utils/';
//...
activeted() {
// 保持滾動條
util.getScroll(this);
}
其二，利用keep-alive緩存整個頁面。但是僅限于沒有實時數(shù)據(jù)變動的頁面
<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'),
},
組件內(nèi)在beforeRouteLeave鉤子函數(shù)中，將該頁面的 keepAlive 屬性設(shè)為false
beforeRouteLeave (to, from, next) {
from.meta.keepAlive = false;
next();
},
然后需要在下一個頁面進(jìn)行配置，頁面返回時設(shè)置上一個頁面的 keepAlive 為true
beforeRouteLeave (to, from, next) {
if (to.path == "/index") {
to.meta.keepAlive = true;
} else {
to.meta.keepAlive = false;
}
next();
},
不滾動
其實有的頁面我們會發(fā)現(xiàn)，體驗下來覺得并不想讓重新進(jìn)入時回到上一次瀏覽的地方。
理論上說這里不加上面提到的各種方法不就行了？其實不然。
「重新進(jìn)入」也分兩種情況：重新打開這個頁面，和刷新頁面。
前者大可不必關(guān)心。對于后者，在比如QQ內(nèi)置瀏覽器中，短時間內(nèi)重新打開相同頁面的邏輯和普通刷新是一樣的。
在瀏覽器中，普通刷新會“記住”用戶上次的位置似乎是個慣例了。如何在頁面刷新時保持在頂部呢？
瀏覽器提供了historyAPI實現(xiàn)。其兼容性還算不錯，除了IE外基本目前使用的瀏覽器都可以使用了。
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
}
強制刷新（CTRL + F5）不會“記住”用戶位置
到此這篇關(guān)于JS實現(xiàn)頁面滾動到關(guān)閉時的位置與不滾動效果的文章就介紹到這了,更多相關(guān)js頁面滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決包含在label標(biāo)簽下的checkbox在ie8及以下版本點擊事件無效果兼容的問題
這篇文章主要介紹了解決包含在label標(biāo)簽下的checkbox在ie8及以下版本點擊事件無效果兼容的問題,本文給大家總結(jié)的非常詳細(xì)，需要的朋友可以參考下2019-10-10
typescript在node.js下使用別名(paths)無效的問題詳解
這篇文章主要給大家介紹了關(guān)于typescript在node.js下使用別名(paths)無效問題的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-07-07
JavaScript canvas實現(xiàn)雪花隨機動態(tài)飄落
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實現(xiàn)雪花隨機動態(tài)飄落，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
今天小編就為大家分享一篇layui輸入框只允許輸入中文且判斷長度的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
前幾天在朋友的iPhone上面玩了一個連鎖泡泡游戲，頭腦發(fā)熱就想用js寫一個。2009-09-09
這篇文章主要介紹了詳解如何在JS代碼中消滅for循環(huán)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
javascript深拷貝是初學(xué)者甚至有經(jīng)驗的開發(fā)著,都會經(jīng)常遇到問題,下面這篇文章主要給大家介紹了關(guān)于JavaScript深拷貝的幾種實現(xiàn)方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
本篇文章主要是對js數(shù)組去重的三種常用方法進(jìn)行了總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
2008-02-02
用canvas 實現(xiàn)個圖片三角化（LOW POLY）效果
這篇文章主要介紹了用canvas 實現(xiàn)個圖片三角化（LOW POLY）效果 的相關(guān)資料,需要的朋友可以參考下2016-02-02