Element.scrollIntoView() 方法讓當(dāng)前的元素滾動(dòng)到瀏覽器窗口的可視區(qū)域
MDN地址

問(wèn)題描述: 頁(yè)面的最底部有分頁(yè)器,但是每次點(diǎn)擊切換頁(yè)碼,要讓頁(yè)面恢復(fù)到最頂端

image.png

語(yǔ)法

element.scrollIntoView(); // 等同于element.scrollIntoView(true) 
element.scrollIntoView(alignToTop); // Boolean型參數(shù) 
element.scrollIntoView(scrollIntoViewOptions); // Object型參數(shù)

參數(shù)有兩種寫(xiě)法
alignToTop : 布爾值類(lèi)型

+true 元素的頂端將和其所在滾動(dòng)區(qū)的可視區(qū)域的最頂端對(duì)齊, 等同于scrollIntoViewOptions: {block: "start", inline: "nearest"}默認(rèn)值
+false 元素的底部將和其所在的滾動(dòng)區(qū)域的可視區(qū)域的底部的對(duì)齊,等同于scrollIntoViewOptions: {block: "end", inline: "nearest"}默認(rèn)值

scrollIntoViewOptions :對(duì)象類(lèi)型(可選參數(shù))

一個(gè)包含下列屬性的對(duì)象：
behavior可選
定義動(dòng)畫(huà)過(guò)渡效果，"auto"或 "smooth" 之一。默認(rèn)為 "auto"。
block可選
定義垂直方向的對(duì)齊，"start", "center", "end", 或 "nearest"之一。默認(rèn)為"start"。
inline 可選
定義水平方向的對(duì)齊， "start", "center", "end", 或 "nearest"之一。默認(rèn)為"nearest"。

示例

var element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});

案例:
效果 --每次點(diǎn)擊按鈕,新增的元素都在滾動(dòng)區(qū)域的最底端

<template>
  <div>
    <div ref="contain" class="container"></div>
    <button @click="toadd">點(diǎn)擊添加元素</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1
    };
  },
  methods: {
    toadd() {
      this.num++;
      let outdom = this.$refs.contain;
      let vli = document.createElement("li");
      vli.innerText = this.num;
      outdom.appendChild(vli);
      vli.scrollIntoView({
        behavior: "smooth",
        block: "end"
      });
    }
  }
};
</script>
<style>
.app {
  text-align: center;
  width: 100vw;
  height: 100vh;
}
.container {
  width: 100px;
  height: 200px;
  margin: 0 auto;
  border: 1px solid #ccc;
  overflow: auto;
}
button {
  width: 100px;
  display: block;
  margin: 30px auto;
}

li {
  margin-top: 20px;
}
</style>