泛览天下

阅读,看尽天下事

vue中调整某一div的滚动条始终触底

2022-06-22 22:21:42


例如:

       当给一个元素添加了ref属性之后,在方法里就可以通过:this.$refs.chatbox //chatbox为上述ref的值       来


举一个比较长见的例子,在聊天框中,每一条消息都是一个组件,通过在父组件中根据数据v-for循环出来该组件,接收到消息之后也能快速渲染出来,这是很方便的方法。
但是要注意的一点是,每次该div里添加一条新的消息之后右边的滚动条应该是立马触底的,也就是显示最新的一条消息,因为消息一般都是添加在一个集合的末尾,当然也就是最后渲染,位置在div的最下端,而不是每次收到新的消息之后,自己还要手动去调整滚动条拉到最下端。
那么,如何实现vue中调整某一div的滚动条始终触底呢?
首先,使某一div拥有纵向滚动条很简单:

overflow-y: scroll;

这个样式可以使一个div中的元素高度超出父级元素时隐藏,并通过右侧滚动条来滑动浏览隐藏部分。
之后,咱们需要调整的该div的scrollTop来调整该滚动条的位置。这个样式指滚动条距离顶部的数值,一开始在最顶端时为0,自然当达到某一数值时便可使滚动条触底,当时当该值趋于无穷大时,虽然可能滚动条并没有滑动这么长的距离,但也依然以触底计算,所以,当你并不去详细计算滚动条的距离时,只是想触底,可以将其设置的非常大,例如:

scrollTop=9999999999

这样浏览器对滚动条是默认触底处理的。所以将事件方法最后使div得scrollTop=9999999999,就可以将滚动条始终触底。
那么问题来了,在vue得methods中如何获取某一div呢?在原生js中大家知道可以document里得getElementById,但是vue里也有更方便得方法获取某一div。就是ref属性。例如:

<div id="chat" ref="chatbox"></div>

当给一个元素添加了ref属性之后,在方法里就可以通过:

this.$refs.chatbox     //chatbox为上述ref的值

来获取到该id,这时便可通过

this.$refs.chatbox.scrollTop = 999999999

来修改该div的滚动条位置,达到触底的效果。
但是这里要注意, 当新数据添加到集合中时,vue渲染是需要时间的,以上述聊天框举例,当添加一条新数据时,vue渲染需要时间,如果直接设置滚动条触底,可能会导致最新的数据仍然隐藏,滚动条在快接近底端的地方。所以建议将这个代码放到计时器里(setTimeout),大概延迟10ms就可以了。