微客导航 » 文章资讯 » vue项目设置scrollTop不起作用(总结)

vue项目设置scrollTop不起作用(总结)

2023-09-02 14:51:04 256

今天在开发中，遇到这样一个情景。一个页面中有三个模块，每个模块对应一个标题，每个模块内容都很长，所以需要点击当前模块对应的标题滚动到模块所在位置。

我想的方案是获取到每个模块距离文档顶部的距离，然后将值赋给对应要滚动的元素。步骤如下:

首先给每个模块一个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)
})
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue项目设置scrollTop不起作用(总结)

热门推荐

随机推荐