JS實(shí)現(xiàn)頁面滾動(dòng)到關(guān)閉時(shí)的位置與不滾動(dòng)效果

更新時(shí)間：2022年06月03日 17:30:52 作者：恪愚

這篇文章主要介紹了JS實(shí)現(xiàn)頁面滾動(dòng)到關(guān)閉時(shí)的位置與不滾動(dòng)效果,滾動(dòng)有兩種方案，其一，利用路由中的meta，在離開頁面時(shí)緩存 top 信息，其二，利用keep-alive緩存整個(gè)頁面。但是僅限于沒有實(shí)時(shí)數(shù)據(jù)變動(dòng)的頁面，需要的朋友可以參考下本文

滾動(dòng)

這也有兩種情況：頁面重新打開，與返回某個(gè)頁面。
如果是前者，必定用cookie或者localStorage?；蛘呗闊┮稽c(diǎn)的、在webview中用其他手段?？傊@個(gè)必須有存儲(chǔ)。

然后在組件的activited或是window.onload時(shí)取出存儲(chǔ)內(nèi)容改變scrollTop 。非常牛逼。

對(duì)于原生頁面，如果在關(guān)鍵位置沒有圖片和表格，可以嘗試在onreadystatechange中完成，不必等到onload。
關(guān)于這點(diǎn)，背景和降級(jí)處理等具體可以參考筆者的這篇文章：點(diǎn)擊跳轉(zhuǎn)

若是第二種情況，則只需要臨時(shí)緩存即可，這里拿vue演示一下：
有兩個(gè)方案。其一，利用路由中的meta，在離開頁面時(shí)緩存 top 信息

// router/index.js
{
  path: "/user",
  name: "user",
  component: () => import("../views/user.vue"),
  meta: { scrollTop: 0, keepScroll: true }
},
// ...
router.beforeEach((to, from, next) => {
  // 記錄需要緩存頁面的滾動(dòng)條高度
  if (from.meta.keepScroll) {
    const $content = document.querySelector("#app");
    const scrollTop = $content ? $content.scrollTop : 0;
    from.meta.scrollTop = scrollTop;
  }
  next();
});

然后在回到當(dāng)前頁面時(shí)拿到臨時(shí)緩存，并賦值

// 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() {
  // 保持滾動(dòng)條
  util.getScroll(this);

}

其二，利用keep-alive緩存整個(gè)頁面。但是僅限于沒有實(shí)時(shí)數(shù)據(jù)變動(dòng)的頁面

<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();
},

然后需要在下一個(gè)頁面進(jìn)行配置，頁面返回時(shí)設(shè)置上一個(gè)頁面的 keepAlive 為true

beforeRouteLeave (to, from, next) {
  if (to.path == "/index") {
    to.meta.keepAlive = true;
  } else {
    to.meta.keepAlive = false;
  }
  next();
},

不滾動(dòng)

其實(shí)有的頁面我們會(huì)發(fā)現(xiàn)，體驗(yàn)下來覺得并不想讓重新進(jìn)入時(shí)回到上一次瀏覽的地方。
理論上說這里不加上面提到的各種方法不就行了？其實(shí)不然。
「重新進(jìn)入」也分兩種情況：重新打開這個(gè)頁面，和刷新頁面。
前者大可不必關(guān)心。對(duì)于后者，在比如QQ內(nèi)置瀏覽器中，短時(shí)間內(nèi)重新打開相同頁面的邏輯和普通刷新是一樣的。

在瀏覽器中，普通刷新會(huì)“記住”用戶上次的位置似乎是個(gè)慣例了。如何在頁面刷新時(shí)保持在頂部呢？
瀏覽器提供了historyAPI實(shí)現(xiàn)。其兼容性還算不錯(cuò)，除了IE外基本目前使用的瀏覽器都可以使用了。

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

強(qiáng)制刷新（CTRL + F5）不會(huì)“記住”用戶位置

到此這篇關(guān)于JS實(shí)現(xiàn)頁面滾動(dòng)到關(guān)閉時(shí)的位置與不滾動(dòng)效果的文章就介紹到這了,更多相關(guān)js頁面滾動(dòng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: