VUE 通过ref 控制滚动条到底部顶部

1：场景描述：开发业务中需要通过按钮点击增加输入栏，当过多时，新增的输入栏在最底部，这时直接控制滚动到底部可省去用户操作。

<div ref="scrollDiv">
...
</div>

2：在点击事件中编写如下代码

     // 滚动到顶部handleScrollTop() {this.$nextTick(() => {let scrollElem = this.$refs.scrollDiv; // 对应ref的命名scrollElem.scrollTo({ top: 0, behavior: 'smooth' });});},// 滚动到底部handleScrollBottom() {this.$nextTick(() => {let scrollElem = this.$refs.scrollDiv; // 对应ref的命名scrollElem.scrollTo({ top: scrollElem .scrollHeight, behavior: 'smooth' });});}

VUE 通过ref 控制滚动条到底部顶部相关推荐

python爬虫拖动滚动条到底部/顶部/指定元素处
# 将滚动条移动到页面的底部 js = "var q=document.documentElement.scrollTop=100000" driver.execute_scrip ...
在vue中如何判断滚动条到达底部
mounted(){//在生命周期函数mounted中console.log(this.$refs.veriface,'智能切分滚动组件实例')//具有滚动条的dom元素,this.$refs.ver ...
纯js监听滚动条到底部（vue版）
项目中,因为数据量过大,为提高页面性能,采用页面滑动滚动条到底部的时候再进行数据请求分页,这边给大给个核心,结合vue的生命周期用纯javascript写的一个监听函数第一个我们需要知道几个属性值 ...
vue-cli网页聊天室：当聊天室有新消息时，控制滚动条滚动到底部
做一个网页聊天室页面,功能需求是:当有新消息出现在聊天室页面时,控制页面滚动条滚动到页面底部: 聊天室页面代码如下: data中的消息列表: messageList: [{Character: &qu ...
JS滚动条位置，顶部，底部，触发事件
效果图: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...
vue切换路由的时候，如何让右侧滚动条滚动到顶部呢？
使用vue切换页面的时候,发现右侧的滚动条的位置似乎存在缓存似的,当右侧滚动条默认在顶部,切换页面的时候,位置停留在顶部,但当右侧滚动条的停留位置不是在顶部的时候,右侧滚动条停留的位置就会是上一个页面 ...
vue滚动条事件（获取滚动条距离底部距离）
网上大部分vue的滚动条操作是监听dom实现,我是用@scroll实现首先有滚动条的div一定要设固定高度,然后overflow:auto;出现滚动条 passive是使滚动更加流畅,减少卡顿 &l ...
js获取滚动条距离浏览器顶部,底部的高度
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...

VUE 通过ref 控制滚动条到底部顶部

VUE 通过ref 控制滚动条到底部顶部相关推荐

最新文章

热门文章