標(biāo)題顯而易見(jiàn)，要說(shuō)兩種情況：重新打開(kāi)頁(yè)面或者返回某個(gè)頁(yè)面時(shí)滾動(dòng)到上次離開(kāi)時(shí)的位置，以及不滾動(dòng)保持在頂部。

滾動(dòng)

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

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

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

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

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

然后在回到當(dāng)前頁(yè)面時(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è)頁(yè)面。但是僅限于沒(méi)有實(shí)時(shí)數(shù)據(jù)變動(dòng)的頁(yè)面

<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>

路由配置里 在需要被緩存的頁(yè)面meta里配置keepAlive屬性

{
  path: '/index',
  name: 'index',
  meta: {
    title: ' ',
    keepAlive: true,//此組件需要被緩存
  },
  component: () => import('@/components/index'),
},

組件內(nèi)在beforeRouteLeave鉤子函數(shù)中，將該頁(yè)面的 keepAlive 屬性設(shè)為false

beforeRouteLeave (to, from, next) { 
  from.meta.keepAlive = false;
  next();
},

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

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

不滾動(dòng)

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

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

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

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

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

最新評(píng)論