uni-app 为什么给元素绑定scroll事件，滚动了列表，触发了滚动事件但是通过事件对象获取到的scrollTop一直为0，到底是什么原因导致的？

发布于 1周前 作者 caililin 来自 Uni-App

uni-app 为什么给元素绑定scroll事件，滚动了列表，触发了滚动事件但是通过事件对象获取到的scrollTop一直为0，到底是什么原因导致的？

类别 信息
产品分类 uniapp/H5
PC开发环境 Windows
操作系统版本 10
HBuilderX 正式
版本号 4.36
浏览器平台 Chrome
浏览器版本 8
项目创建方式 HBuilderX

操作步骤：

<view class="list-view" ref="listView"  @scroll="scroll">  
<view class="list-view-item" v-for="val in 1000">  
{{val}}889  
</view>  
</view>  

export default{  
methods:{  
scroll(e){  
console.log(e);  
}  
}  
}

.list-view{  
width:100%;  
height:500px;  
overflow: auto;  
}  

.list-view-item{  
height:25px;  
}

预期结果：

在scroll事件中能获取到区域滚动已滚动距离scrollTop

实际结果：

在scroll事件中获取区域滚动已滚动距离scrollTop一直为0

bug描述：

为什么我给元素绑定scroll事件，滚动了列表，触发了滚动事件但是通过事件对象获取到的scrollTop一直为0，到底是什么原因导致的？

统一开发抹平底层api差异，在app中获取不了就算了，在web中也不行？到底统一了什么？统一开发bug？


Harmonyos Next教程
1 回复

在uni-app中，如果你发现给元素绑定scroll事件后，滚动了列表但通过事件对象获取的scrollTop一直为0，这通常是由于事件绑定或事件触发对象不正确导致的。以下是一些可能的原因及解决方案，并附上代码示例来帮助你排查和解决问题。

可能的原因及解决方案

  1. 事件绑定错误： 确保你的scroll事件是绑定在可滚动的元素上，通常是<scroll-view>组件。

    <template>
  <scroll-view @scroll="handleScroll" scroll-y="true" style="height: 300px;">
    <div style="height: 1000px;">
      <!-- 内容 -->
    </div>
  </scroll-view>
</template>

<script>
export default {
  methods: {
    handleScroll(event) {
      console.log(event.detail.scrollTop); // 获取scrollTop
    }
  }
}
</script>

    注意：在uni-app中，scroll事件的事件对象不同于原生JavaScript，需要使用event.detail来获取滚动信息。

  2. CSS样式影响： 确保<scroll-view>组件或其内容有足够的空间来滚动。如果内容高度不够或<scroll-view>的高度被限制导致无法滚动，scrollTop将始终为0。

  3. 嵌套滚动问题： 如果你的页面中有多个滚动区域嵌套，确保事件绑定在正确的滚动区域上。嵌套滚动可能导致事件冒泡或捕获不正确，从而影响scrollTop的获取。

  4. 平台差异： uni-app支持多平台（如H5、小程序、App等），不同平台的实现细节可能有所不同。确保在不同平台上进行测试，并查看平台特定的文档和限制。

  5. 动态内容加载： 如果你的列表内容是动态加载的，确保在内容加载完成后再进行滚动操作。否则，可能在内容还未渲染完成时触发scroll事件，导致scrollTop为0。

示例代码（完整）

以下是一个完整的示例，展示了如何在uni-app中正确绑定scroll事件并获取scrollTop：

<template>
  <view>
    <scroll-view @scroll="handleScroll" scroll-y="true" style="height: 300px; border: 1px solid #ccc;">
      <view style="height: 1000px; padding: 20px;">
        滚动内容...
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  methods: {
    handleScroll(event) {
      console.log('scrollTop:', event.detail.scrollTop);
    }
  }
}
</script>

<style scoped>
/* 样式可根据需要调整 */
</style>

确保按照上述示例正确绑定事件，并检查相关样式和平台差异，通常可以解决scrollTop为0的问题。

回到顶部