当前位置：首页 > news >正文

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

news 2025/5/24 18:16:42

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

 <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);},},