JS實現頁面滾動到關閉時的位置與不滾動效果

Posted on by

標題顯而易見，要說兩種情況：重新打開頁面或者返回某個頁面時滾動到上次離開時的位置，以及不滾動保持在頂部。

滾動

這也有兩種情況：頁面重新打開，與返回某個頁面。
如果是前者，必定用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內置瀏覽器中，短時間內重新打開相同頁面的邏輯和普通刷新是一樣的。

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

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

強制刷新（CTRL + F5）不會“記住”用戶位置

到此這篇關於JS實現頁面滾動到關閉時的位置與不滾動效果的文章就介紹到這瞭,更多相關js頁面滾動內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：