把滚动条定位在底部,首先尝试了动态获取当前滚动条并修改滚动条到顶部的距离的方式:

var container= document.getElementById('#你想要选中的内容id')
container.scrollTop = container.scrollHeight // 把滚动条顶部加上滚动条高度

但是滚动条并没有滚动(一脸懵逼),控制台打印可以获取到值,但并没有执行修改操作,估计是动态加载数据时,数据还未加载,滚动条就已经执行。

利watch监控数据的改变,然后动态修改滚动条到顶部的距离。
但是滚动条还是没有滚动(一脸懵逼)。

watch: {
  '要监视的数据': 'scrollToBottom'
}
 
scrollToBottom: function () {
var container= document.getElementById('#你想要选中的内容id')
container.scrollTop = container.scrollHeight // 把滚动条顶部加上滚动条高度
}

最后尝试用scrollIntoView()函数通过添加一个元素实现,但刚开始一直有问题,因为把元素加在了动态列表的后面,在动态列表的加载函数后面加了把这个元素scrollIntoView()事件,导致滚动列表下面一直有一块空白块,使用样式也无法隐藏。关键问题是使用v-scroll的位置,不要放在包裹整个内容的标签上,而是用在需要一直定位在最底部的元素上。直接在动态列表底部最后一个元素上使用,每次插入元素时触发滚动函数,把它滚动到视野范围内。

<div class="Containt_box">
    <div v-for="(item,index) in messageList" :key="index">
        <i>{{item.Time}}</i>
        <p class="clearfix me" v-scroll>  //使用位置
            <img src="../../static/images/avatar/me.jpg">
            <span>{{item.Message}}</span>
        </p>
    </div>
</div>
directives: {
   scroll: {
     inserted(el) {
       el.scrollIntoView()
    }
  }
}

参考文章

Logo

前往低代码交流专区

更多推荐