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

這篇文章主要講解了“JS如何實現頁面滾動到關閉時的位置與不滾動效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JS如何實現頁面滾動到關閉時的位置與不滾動效果”吧！

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

滾動

這也有兩種情況：頁面重新打開，與返回某個頁面。
如果是前者，必定用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如何實現頁面滾動到關閉時的位置與不滾動效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！