vue项目设置scrollTop不起作用(总结)
今天在开发中,遇到这样一个情景。一个页面中有三个模块,每个模块对应一个标题,每个模块内容都很长,所以需要点击当前模块对应的标题滚动到模块所在位置。
我想的方案是获取到每个模块距离文档顶部的距离,然后将值赋给对应要滚动的元素。步骤如下:
首先给每个模块一个id,例如:
点击每个标题的时候获取到当前模块的id
{{navItem.name}} methods:{ //tab点击滚动 goAnchor(val){ letanchor=this.$el.querySelector(val); }
*最后就可以获取每个模块距离文档顶部的距离了,然后赋值给对应要滚动的元素就可以了
methods:{ //tab滚动 goAnchor(val){ letanchor=this.$el.querySelector(val); this.$nextTick(()=>{ document.querySelector(".el-main").scrollTop=anchor.offsetTop; }); },
切记:在这里一定要加上this.$nextTick()方法,否则document.querySelector(“.el-main”).scrollTop的值永远为0,不会赋值成功的!
container.scrollTop一直为0不能赋值的解决方法
watch:{ historyList(){ this.$nextTick(()=>{ constcontainer=this.$el.querySelector('.scrolldivmain') console.log(container.scrollHeight) console.log(container.scrollTop) this.$refs.scrolldiv.scrollTo(0,container.scrollHeight+'px') container.scrollTop=container.scrollHeight container.scrollTop(0,container.scrollHeight) console.log(container.scrollTop)//container.scrollTop一直为0 }) } }
注意点
确定下滚动条是在哪里显示的
有个方法判断下:
window.addEventListener('scroll',()=>{ varscrollTop=this.$el.querySelector('.scrolldivmain') //console.log(scrollTop.scrollHeight) console.log(scrollTop.scrollTop)//查看打印的值是否有变化如果有则说明滚滚动条在这个标签中 //scrollTop.scrollTop=scrollTop.scrollHeight//可以尝试下滚动滚动条。一直在底部则可以设置成功 },true)
解决方案
需要用到的地方调用this.scrollToBottom()即可
somecode methods:{ //滚动到底部 scrollToBottom(){ this.$nextTick(()=>{ setTimeout(()=>{ varscrollTop=this.$el.querySelector('.scrolldivmain') scrollTop.scrollTop=scrollTop.scrollHeight },13) }) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。