vue 渲染完页面滚动条在页面最底步的位置

最新推荐文章于 2023-02-17 16:46:23 发布

原创最新推荐文章于 2023-02-17 16:46:23 发布 · 591 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #滚动条

技术随笔专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在Vue项目中实现元素的平滑滚动效果，包括解决页面切换时的滚动定位问题，通过计算滚动距离并利用行为属性实现平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

data() {
    return {
        contentDiv: "", //容器
    },
},

created() {
    this.$nextTick(function() {
      //scrollTo兼容性问题
      setTimeout(() => {
        this.contentDiv.scrollTo({
          top: 10000 //需要自己进行计算   top为滚动条距最高点的距离
          behavior: "smooth"
        });
      }, 500); //页面切换大概需要0.4秒的样子，等页面切换完成了再滚动定位
    });
  },

 mounted() {
    //获取需要滚动的容器的节点
    this.contentDiv = document.getElementsByClassName("content")[0];
 },