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

5 篇文章 0 订阅

       举一个比较长见的例子,在聊天框中,每一条消息都是一个组件,通过在父组件中根据数据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就可以了。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值