欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2022年06月03日 17:30:52   作者：恪愚  
這篇文章主要介紹了JS實(shí)現(xiàn)頁面滾動到關(guān)閉時的位置與不滾動效果,滾動有兩種方案，其一，利用路由中的meta，在離開頁面時緩存 top 信息，其二，利用keep-alive緩存整個頁面。但是僅限于沒有實(shí)時數(shù)據(jù)變動的頁面，需要的朋友可以參考下本文

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

滾動

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

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

對于原生頁面，如果在關(guān)鍵位置沒有圖片和表格，可以嘗試在onreadystatechange中完成，不必等到onload。
關(guān)于這點(diǎn)，背景和降級處理等具體可以參考筆者的這篇文章：點(diǎ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í)時數(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();
},

不滾動

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

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

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

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

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

相關(guān)文章

最新評論