重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

vue项目中scrollTop设置不起作用如何解决

这篇文章将为大家详细讲解有关vue项目中scrollTop设置不起作用如何解决,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联专业IDC数据服务器托管提供商,专业提供成都服务器托管,服务器租用,服务器托管雅安服务器托管雅安,成都多线服务器托管等服务器托管服务。

首先给每个模块一个id,例如:



点击每个标题的时候获取到当前模块的id

{{navItem.name}}

methods: {
   // tab点击滚动
   goAnchor(val) {
    let anchor = this.$el.querySelector(val);
 }

*最后就可以获取每个模块距离文档顶部的距离了,然后赋值给对应要滚动的元素就可以了

methods: {
   // tab滚动
   goAnchor(val) {
    let anchor = 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(() => {
    const container = 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', () => {
    var scrollTop = this.$el.querySelector('.scrolldivmain')
    // console.log(scrollTop.scrollHeight)
    console.log(scrollTop.scrollTop) // 查看打印的值是否有变化 如果有 则说明滚滚动条在这个标签中
    // scrollTop.scrollTop = scrollTop.scrollHeight // 可以尝试下 滚动滚动条。一直在底部则可以设置成功
  }, true)

解决方案

需要用到的地方 调用this.scrollToBottom()即可




  some code

methods: {
 // 滚动到底部
  scrollToBottom () {
   this.$nextTick(() => {
    setTimeout(() => {
     var scrollTop = this.$el.querySelector('.scrolldivmain')
     scrollTop.scrollTop = scrollTop.scrollHeight
    }, 13)
   })
  }
}

关于vue项目中scrollTop设置不起作用如何解决就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


名称栏目:vue项目中scrollTop设置不起作用如何解决
文章URL:http://cqcxhl.com/article/jccioi.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP