页面滚动到指定位置——记录div滚动高度，并下次自动滚动到该位置

小曲曲

于 2024-09-02 13:54:18 发布

阅读量306

点赞数 3

分类专栏： js 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_43848576/article/details/141818040

版权

js 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

 <div 
    style="width: 220px; height: calc(100vh - 1.6rem)"
    class="scroll hide-scroll"
    ref="menu"
  >
    <div 
      v-for="(item, i) in 100"
      :key="i"
    >
      <div>{{ item}}</div>
    </div>
  </div>
  
  
  /* ****滚动条样式，添加改类名 scroll */
.scroll {
  overflow-y: auto;
}

.scroll::-webkit-scrollbar {
  width: 8px;
}

.hide-scroll::-webkit-scrollbar {
  width: 0px;
}

.scroll::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
}

.scroll::-webkit-scrollbar-thumb:hover {
  background: #d7f8f5;
}

mounted() {
    console.log(localStorage.getItem("menu"));

    // 获取上次滚动高度，自动滚动到顶部
    // ☆☆☆☆☆ 必须加 $nextTick 滚动才起作用
    this.$nextTick(() => {
      if (localStorage.getItem("menu")) {
        this.$refs.menu.scrollTo({
          top: localStorage.getItem("menu") * 1,
          // behavior: "smooth",
        });
      }
    });

    this.$refs.menu.addEventListener("scroll", this.handleScroll);
  },
  methods: { 
    handleScroll() {
      var scrollTop = this.$refs.menu.scrollTop;
      localStorage.setItem("menu", scrollTop);
    },
  },