uni-app scroll-view 组件里面的 position: fixed; 是相对于 scroll-view 而不是整个页面
uni-app scroll-view 组件里面的 position: fixed; 是相对于 scroll-view 而不是整个页面
示例代码：
<template>
<view class="content">
<scroll-view scroll-y="true" >
<view class="content_box">
<button @click="Isright = !Isright" type="default">按钮</button>
<view v-if="Isright" class="right_box"> </view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
Isright:false
}
}
}
</script>
<style>
.content_box{width: 100%;height: 500rpx;}
.right_box{
position: fixed;
right: 0;top: 0;bottom: 0;
width: 200rpx;background-color: #007AFF;z-index: 9999;
}
.logo {margin: auto;height: 200rpx;width: 200rpx;}
</style>
操作步骤：
- 点击按钮展示position: fixed;定位的元素
预期结果：
- 元素position: fixed;right: 0;top: 0;bottom: 0;z-index: 9999; 应该占据整屏
实际结果：
- fixed定位的元素 只有scroll-view的高度
bug描述：
- 在scroll-view 组件里面的元素使用position: fixed;定位，是相对于scroll-view而不是整个页面，即使top 0 bottom: 0;也是scroll-view高度，3.2.8版本没有这个问题
| 信息项 | 内容 |
|---|---|
| 产品分类 | uniapp/H5 |
| PC开发环境 | Windows |
| PC开发环境版本 | windows10 专业版 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 3.2.9 |
| 浏览器平台 | Chrome |
| 浏览器版本 | 版本 92.0.4515.107（正式版本） （64 位） |
| 项目创建方式 | HBuilderX |
更多关于uni-app scroll-view 组件里面的 position: fixed; 是相对于 scroll-view 而不是整个页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html
就是啊3.2.9就出现这个问题了,以前都是对的
更多关于uni-app scroll-view 组件里面的 position: fixed; 是相对于 scroll-view 而不是整个页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在 scroll-view 中使用 position: fixed 确实会出现定位基准异常的问题，这是由 scroll-view 的渲染机制导致的。
scroll-view 在 H5 平台默认会创建一个独立的滚动容器，其内部元素的 fixed 定位会相对于这个容器而非整个视窗。这是 Web 标准中 transform 或 will-change 属性创建层叠上下文时的正常表现，并非 uni-app 的 bug。
解决方案：
-
将 fixed 元素移出 scroll-view（推荐）： 将需要 fixed 定位的元素放在
scroll-view外部，通过绝对/固定定位控制层级。 -
使用 CSS 变量调整定位： 如果必须放在内部，可通过计算
scroll-view的滚动位置，动态调整 fixed 元素的定位值。 -
使用
position: sticky替代： 如果需求符合粘性定位的场景，可使用sticky实现类似效果。 -
调整
scroll-view样式： 尝试为scroll-view添加style="transform: none;"或移除可能创建层叠上下文的属性。
代码调整示例（方案1）：
<template>
<view class="content">
<scroll-view scroll-y="true">
<!-- 滚动内容 -->
</scroll-view>
<view v-if="Isright" class="right_box"></view>
</view>
</template>