描述

• 将调用此方法的元素滚动到浏览器窗口的可见区域。

scrollIntoView 官方文档

用法

• element.scrollIntoView()
  • 用法同 element.scrollIntoView(true)
• element.scrollIntoView(alignToTop)
  • true 表示 element 元素顶部与可见区域的顶部对齐，默认值
  • false 表示 element 元素底部与可见区域的底部对齐
• element.scrollIntoView(scrollIntoViewOptions)
  • behavior 过度动画
    • auto 自动
    • instant 立即滚动到位置-瞬间
    • smotth 平滑滚动到位置-缓动
  • block 纵向对齐方式
    • start 表示 element 元素顶部与可见区域的顶部对齐，默认值
    • center 表示 element 元素中部与可见区域的中部对齐
    • end 表示 element 元素底部与可见区域的底部对齐
    • nearest 当 element 元素一部分不在可视区域内时，会就近滚动，可能是顶部对齐，也可能是底部对齐
  • inline 横向对齐方式
    • start 表示 element 元素左边与可见区域的左边对齐
    • center 表示 element 元素中部与可见区域的中部对齐
    • end 表示 element 元素右边与可见区域的右边对齐
    • nearest 当 element 元素一部分不在可视区域内时，会就近滚动，可能是左边对齐，也可能是右边对齐，默认值

实例

• 模块1

// 瞬间滚动，纵向顶部对齐，横向就近对齐
this.$refs.block1.scrollIntoView();

• 模块2

// 瞬间滚动，纵向底部对齐，横向就近对齐
this.$refs.block2.scrollIntoView(false);

• 模块3

// 平滑滚动，纵向居中对齐，横向左边对齐
this.$refs.block3.scrollIntoView({
    behavior: "smooth",
    block: "center",
    inline: "start",
});

• 模块4

// 瞬间滚动，纵向就近对齐，横向居中对齐
this.$refs.block4.scrollIntoView({
    behavior: "instant",
    block: "nearest",
    inline: "center",
});

• 模块5

// 平滑滚动，纵向顶部对齐，横向就近对齐
this.$refs.block5.scrollIntoView({
    behavior: "smooth",
    block: "start",
    inline: "nearest",
});

完整代码

<template>
  <div class="mainBox">
    <div class="block block1" ref="block1">
      瞬间滚动，纵向顶部对齐，横向就近对齐
    </div>
    <div class="block block2" ref="block2">
      瞬间滚动，纵向底部对齐，横向就近对齐
    </div>
    <div class="block block3" ref="block3">
      平滑滚动，纵向居中对齐，横向左边对齐
    </div>
    <div class="block block4" ref="block4">
      瞬间滚动，纵向就近对齐，横向居中对齐
    </div>
    <div class="block block5" ref="block5">
      平滑滚动，纵向顶部对齐，横向就近对齐
    </div>
    <div class="block blank">填充区域</div>
    <div class="markBtn">
      <div
        class="btn btn1"
        :class="{ active: actCkick == 1 }"
        @click="markScrollFunc(1)"
      >
        按钮1
      </div>
      <div
        class="btn btn2"
        :class="{ active: actCkick == 2 }"
        @click="markScrollFunc(2)"
      >
        按钮2
      </div>
      <div
        class="btn btn3"
        :class="{ active: actCkick == 3 }"
        @click="markScrollFunc(3)"
      >
        按钮3
      </div>
      <div
        class="btn btn4"
        :class="{ active: actCkick == 4 }"
        @click="markScrollFunc(4)"
      >
        按钮4
      </div>
      <div
        class="btn btn5"
        :class="{ active: actCkick == 5 }"
        @click="markScrollFunc(5)"
      >
        按钮5
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      actCkick: null,
    };
  },
  mounted() {},
  methods: {
    // 点击按钮
    markScrollFunc(index) {
      this.actCkick = index;
      if (index == 1) {
        this.$refs.block1.scrollIntoView();
      } else if (index == 2) {
        this.$refs.block2.scrollIntoView(false);
      } else if (index == 3) {
        this.$refs.block3.scrollIntoView({
          behavior: "smooth",
          block: "center",
          inline: "start",
        });
      } else if (index == 4) {
        this.$refs.block4.scrollIntoView({
          behavior: "instant",
          block: "nearest",
          inline: "center",
        });
      } else if (index == 5) {
        this.$refs.block5.scrollIntoView({
          behavior: "smooth",
          block: "start",
          inline: "nearest",
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.mainBox {
  width: 500px;
  height: 300px;
  padding: 60px;
  overflow: scroll;
  .block {
    color: #fff;
    &.block1 {
      width: 100px;
      height: 200px;
      background: #dfaaa2;
    }
    &.block2 {
      width: 100px;
      height: 200px;
      background: #cea5b7;
    }
    &.block3 {
      width: 200px;
      height: 100px;
      background: #927a9b;
    }
    &.block4 {
      width: 500px;
      height: 200px;
      background: #659ea2;
    }
    &.block5 {
      width: 400px;
      height: 100px;
      background: #6eac95;
      display: inline-block;
    }
    &.blank {
      width: 600px;
      height: 600px;
    }
  }
  .markBtn {
    position: fixed;
    right: 10px;
    top: 10px;
    .btn {
      padding: 10px 20px;
      background: #fff;
      margin-bottom: 5px;
      cursor: pointer;
      &.btn1 {
        border: 1px solid #dfaaa2;
        color: #dfaaa2;
        &.active {
          background: #dfaaa2;
        }
      }
      &.btn2 {
        border: 1px solid #cea5b7;
        color: #cea5b7;
        &.active {
          background: #cea5b7;
        }
      }
      &.btn3 {
        border: 1px solid #927a9b;
        color: #927a9b;
        &.active {
          background: #927a9b;
        }
      }
      &.btn4 {
        border: 1px solid #659ea2;
        color: #659ea2;
        &.active {
          background: #659ea2;
        }
      }
      &.btn5 {
        border: 1px solid #6eac95;
        color: #6eac95;
        &.active {
          background: #6eac95;
        }
      }
      &.active {
        border: 1px solid #fff;
        color: #fff;
      }
    }
  }
}
</style>