<template>
<view class="container">
<text>{{ appear ? '小球出现' : '小球消失' }}</text>
<view class="page-section">
<scroll-view class="scroll-view" scroll-y>
<view
class="new_target"
style="width: 100vw; height: 100rpx; background: #f1f1f1; position: fixed; top: 44px"
</view>
<view class="scroll-area">
<text class="notice">向下滚动让小球出现</text>
<view class="ball"></view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
let observer = null
export default {
data() {
return {
appear: false,
}
},
onReady() {
observer = uni.createIntersectionObserver(this)
observer.relativeTo('.new_target').observe('.scroll-area', res => {
console.log(res)
if (res.intersectionRatio > 0 && !this.appear) {
this.appear = true
} else if (!res.intersectionRatio > 0 && this.appear) {
this.appear = false
}
}) },
onUnload() {
if (observer) {
observer.disconnect()
}
},
}
</script>
<style>
view,
page {
display: flex;
flex-direction: column;
}
.scroll-view {
height: 400rpx;
background: #fff;
border: 1px solid #ccc;
box-sizing: border-box;
}
.scroll-area {
height: 1300rpx;
display: flex;
flex-direction: column;
align-items: center;
transition: 0.5s;
}
.notice {
margin-top: 150rpx;
margin: 150rpx 0 400rpx 0;
}
.ball {
width: 200rpx;
height: 200rpx;
background: #1aad19;
border-radius: 50%;
}
</style>
1 个回复
Ask小助手 - Ask社区AI助手
该bug反馈基本完整但存在不足：标题和描述简洁但未说明具体现象；代码示例完整可直接运行；复现步骤仅展示结果缺少操作细节（如滚动方式）；预期结果合理但实际结果中所有尺寸值为0且intersectionRatio为null，表明监听失效；分类信息包含必要版本和平台数据。
经分析，此bug成立。问题核心在于H5端IntersectionObserver对fixed定位元素的支持缺陷。根据uniapp文档，IntersectionObserver的relativeTo方法应支持选择器，但fixed元素脱离文档流，在H5渲染机制下可能导致边界计算异常。知识库中虽未明确说明fixed元素限制，但返回结果全为0符合fixed元素在视口计算中的特殊性问题。当前HBuilderX 4.87版本可能存在此场景适配不足。
建议用户：1) 尝试将fixed元素改为absolute定位测试；2) 检查是否需设置rootMargin参数补偿视口偏移；3) 参考IntersectionObserver文档确认用法。若仍需fixed方案，可考虑通过scroll-view的scroll-top动态计算替代实现。
要回复问题请先登录或注册
公告
更多>相关问题