- 发布：2024-08-31 11:00
- 更新：2024-09-02 11:25
- 阅读：255
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 13.6.6
HBuilderX类型： 正式
HBuilderX版本号： 4.26
手机系统： 全部
手机系统版本号： Android 14
手机厂商： 华为
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
css 代码
position: sticky;
top: 0;
z-index: 9;
css 代码
position: sticky;
top: 0;
z-index: 9;操作步骤：
如上
如上
预期结果：
吸顶
吸顶
实际结果：
滚动一段距离失效
滚动一段距离失效
bug描述：
css 的 position: sticky; 在 scroll-view 里面会失效，在页面级滚动中正常表现，只要放到scroll-view 里面就会出现滚动一段距离后失效的问题，
希望官方修复 position: sticky; 在 scroll-view 里面会失效的问题，否则吸顶就只能用js 方式控制，会很卡
最佳回复
<template>
<view class="content">
<scroll-view class="scroll" scroll-y="true" >
<view>
<view class="box" v-for="item in 10">这个是普通内容 {{item}}</view>
<view class="box sticky">我是吸顶内容</view>
<view class="box" v-for="item in 30">这个是普通内容{{10+item}}</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onReady() {
},
methods: {
}
}
</script>
<style>
.scroll {
border: 1px blue solid;
box-sizing: border-box;
height: 500px;
}
.box {
padding: 15px;
border: 1px red solid;
background-color: beige;
}
.sticky {
position: sticky;
top: 40px;
background-color: #999;
color: #fff;
}
</style>试一试这段代码的吸顶是否生效 ？
注意：
- sticky元素需要达到固定定位的位置。
- 为sticky元素设置位置参数，相反方向上sticky元素的外边界（margin or border or padding or content）到粘性约束元素的内边界（content）之间需要有元素，可以撑起一定的空间，供sticky元素固定定位使用。
- 粘性约束元素与滚动元素之间不能存在样式属性为overflow: hidden的元素。
空白人吗 (作者) - 7年开发经验 可接APP 小程序 网页 后端 qq6864952
麻烦官方看到回复下呀，问题很棘手，我认为scroll-view 应该跟weex 的list 一样提供一个 header 组件
或者就是修复 css position: sticky; 失效问题，
空白人吗 (作者)
谢谢，我套了 一层view 就可以用了
2024-09-02 18:01