vue scrollTop 无法赋值

dreamGong 发布于2019-08-23 14:12 / 1223人阅读

摘要：一直在底部则可以设置成功解决方案需要用到的地方调用即可滚动到底部参考文章无法监听事件参考代码

遇到问题

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 无法监听scroll事件
参考vue-chat代码

云服务器 GPU云服务器 scrollTop Vue_Vue Vue vue3 学习笔记 (五)——vue3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100254.html

Web前端开发过程踩过的坑以及一些小方法技巧（持续更新）

摘要：一上浏览器使用不允许事件代理到上选择器以上绑定可能会出现点击失效的情况。对于，如果工具是以下版本，在中加入以下代码以上的版本加入以下代码八开发对于文件的处理问题。解决方法有给元素设置绝对定位即可。元素换成内联元素，如。一、iOS上浏览器使用jQuery不允许事件代理到document上 $(document).on(click, 选择器, function(){}); 以上绑定可能...

arashicage 2019-08-23 15:13 评论0 收藏0
Web前端开发过程踩过的坑以及一些小方法技巧（持续更新）

摘要：一上浏览器使用不允许事件代理到上选择器以上绑定可能会出现点击失效的情况。对于，如果工具是以下版本，在中加入以下代码以上的版本加入以下代码八开发对于文件的处理问题。解决方法有给元素设置绝对定位即可。元素换成内联元素，如。一、iOS上浏览器使用jQuery不允许事件代理到document上 $(document).on(click, 选择器, function(){}); 以上绑定可能...

binta 2019-08-02 14:15 评论0 收藏0
Web前端开发过程踩过的坑以及一些小方法技巧（持续更新）

摘要：一上浏览器使用不允许事件代理到上选择器以上绑定可能会出现点击失效的情况。对于，如果工具是以下版本，在中加入以下代码以上的版本加入以下代码八开发对于文件的处理问题。解决方法有给元素设置绝对定位即可。元素换成内联元素，如。一、iOS上浏览器使用jQuery不允许事件代理到document上 $(document).on(click, 选择器, function(){}); 以上绑定可能...

张春雷 2019-08-30 15:55 评论0 收藏0
vue结合preventDefault()和页面滚动高度计算，解决ios橡皮筋效果

摘要：第一种方法我尝试了，觉得不是很好用，而且页面的滑动变得卡顿，橡皮筋效果还是时而出现，因此考虑第二种办法。由上面的定义可知，当页面滑动到顶部时，为，当页面出现橡皮筋时，小于当页面滑动到底部时，。感谢的启发，方法很有用！好几个月以前，我写了一个类似于自动回复那种的客服页面，嵌入到公司开发的app里。上周测试突然找到我，说页面在滑动的时候，输入框也会跟着上下滑动，而这个...

JerryWangSAP 2019-08-23 14:09 评论0 收藏0
vue 解决无法设置滚动位置的问题

摘要：问题描述在实现锚点定位的时候发现无法设置滚动条的位置。在中，使用无法设置滚动条的高度。一直是原因因为的页面指定了，即指定了时，使用。工作不仅仅是工作完成任务，是一个自己发现自身问题，提升能力和对自己的技术实操实践的过程。问题描述在实现锚点定位的时候发现无法设置滚动条的位置。在Vue中，使用 document.body.scrollTop=952 无法设置滚动条的高度。 document....

番茄西红柿 2019-04-23 13:20 评论0 收藏0