<template>
<view class="container">
<view class="box"></view>
<view class="wrap"></view>
</template>
<script setup>
onMounted(() => {
instance.value = getCurrentInstance()
observer.value = uni.createIntersectionObserver(instance.value)
observer.value
.relativeTo('.box')
.observe('.wrap', (res) => {
console.log('createIntersectionObserver res', res)
})
})
</script>
<style lang='scss' scoped>
.container {
height: 1000vh;
.box {
position: fixed;
top: 20rpx;
width: 100%;
height: 100rpx;
background: rgba(0, 0, 0, 0.5);
z-index: 2;
}
.wrap {
width: 200rpx;
height: 200rpx;
background: cyan;
position: sticky;
top: 0;
z-index: 3;
}
}
</style>
mrzhj
- 发布：2024-08-07 17:10
- 更新：2024-08-07 17:36
- 阅读：208
【报Bug】uni.createIntersectionObserver观察的dom元素如果使用了positon:fixed|sticky；的话，在H5端将会失效，在小程序正常！
分类：uni-app
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win11
HBuilderX类型： 正式
HBuilderX版本号： 4.24
浏览器平台： Chrome
浏览器版本： 127.0.6533.73
项目创建方式： HBuilderX
示例代码：
操作步骤：
h5不触发console.log，小程序正常触发
h5不触发console.log，小程序正常触发
预期结果：
期望在h5下也能出发
期望在h5下也能出发
实际结果：
未触发
未触发
bug描述：
uni.createIntersectionObserver观察的dom元素如果使用了positon:fixed|sticky；的话，在H5端将会失效，在小程序正常！
mrzhj (作者)
我关注的只是positon:sticky;不过不管交叉视口（即我例子中的.box）定位是fixed或者sticky，交叉之后在h5端都是触发不了console的，小程序是可以的，并且只会在初始化的时候默认触发一下console，这个我也不理解！
2024-08-07 18:11
DCloud_UNI_yuhe
回复 mrzhj: 你提供的代码似乎就是只会触发一次的，你得改变其交叉状态才可以多次触发，你这也没有改变交叉状态
2024-08-07 19:53
mrzhj (作者)
回复 DCloud_UNI_yuhe: 就是同样的代码我在小程序中直接滚动屏幕的时候，warp与box在视觉上发生交叉就会触发console，但是在h5就不会触发
2024-08-08 10:25
DCloud_UNI_yuhe
回复 mrzhj: 你是不是给出的代码有问题，看起来你给出的代码,wrap和box都是固定的，不会产生交叉
2024-08-08 10:39
mrzhj (作者)
回复 DCloud_UNI_yuhe: container 这个class的标签少写了个闭合标签，不好意思
2024-08-08 14:09