vue 监听滚动条到达底部和头部

最新推荐文章于 2025-05-24 08:00:30 发布

Joe佳

最新推荐文章于 2025-05-24 08:00:30 发布

阅读量875

点赞数

CC 4.0 BY-SA版权

分类专栏：小功能文章标签： vue.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_58100683/article/details/131803792

小功能专栏收录该内容

6 篇文章

订阅专栏

该代码示例展示了如何在Vue组件中监听滚动事件，通过$nextTick确保DOM更新后操作元素。当滚动到底部或顶部时，它会打印相应的消息。记录列表的数据变化被观察，但主要关注的是处理滚动事件来判断用户是否达到列表的顶部或底部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码

 <div id="myElement"><div>

 watch: {
    // recordList是组件传递的数据，不用管
    recordList(list) {
      if (list) {
        this.$nextTick(() => {
          var bady = document.getElementById('myElement') 
          bady.onscroll = () => {
            // 获取距离顶部的距离
            var scrollTop = bady.scrollTop
            if (scrollTop !== 0 && this.oldv == 0) {
              this.oldv = scrollTop
            }
            // 获取可视区的高度
            var windowHeight = bady.clientHeight
            // 获取滚动条的总高度
            var scrollHeight = bady.scrollHeight
            if (scrollTop + windowHeight >= scrollHeight) {
              console.log('到达底部了')
            }
            if (scrollTop == 0 && this.oldv !== 0) {
              console.log('到达头部了')
            }
          }
        })
      }
    },
  },