梅雨东风
梅雨东风
  • 发布:2024-06-28 16:28
  • 更新:2024-06-28 17:23
  • 阅读:717

scroll-view使用position:sticky不能一直生效

分类:uni-app

scroll-view使用position:sticky不能一直生效,当滚动相当于父元素高度后,就会失效。使用view标签设置overflow-y不会有这个现象。如何处理可以让scroll-view内设置sticky一直生效?不将标题放在scroll标签同级,让scroll自动适应剩余高度的原因是,标题上还有一个图片,根据scroll的滚动距离控制又觉得太麻烦。谢谢大佬的解答。

<template>  
<view class="content">  
<scroll-view scroll-y="true" class="scroll-view">  
<view class="header">  
我是固定标题  
</view>  
<view class="body">  
我是内容  
</view>  
<view class="line">  
我是父元素高度  
</view>  
</scroll-view >  
</view>  
</template>  
<script>  
export default {  
data() {  
return {  
title: 'Hello',  
};  
},  
onLoad() {  
},  
methods: {}  
};  
</script>  
<style lang="scss" scoped>  
.scroll-view{  
height: 100vw;  
/* overflow-y: auto; */  
position: relative;  
color: #fff;  
text-align: center;  
.header{  
background-color: red;  
height: 80rpx;  
line-height: 80rpx;  
position: sticky;  
top: 0rpx;  
}  
.body{  
background-color: green;  
height: 800vh;  
}  
.line{  
position: absolute;  
top: 0;  
height: 100%;  
background-color: royalblue;  
z-index: 2;  
}  
}  
</style>
2024-06-28 16:28 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

你运行的那个端?我帮你测的h5端 增加一个包裹的子元素即可
当在scroll-view中使用sticky元素时 为确保其正常响应滚动效果 需要在scroll-view内部添加一个无样式的view元素 作为所有内容的根元素 这样即使sticky元素超出了scroll-view的原始高度 它也能正确地识别与顶部的相对位置 保持其应有的样式和交互效果

<template>  
    <view class="content">  
        <scroll-view scroll-y="true" class="scroll-view">  
            <view>  
                <view class="header">  
                    我是固定标题  
                </view>  
                <view class="body">  
                    我是内容  
                </view>  
                <view class="line">  
                    我是父元素高度  
                </view>  
            </view>  
        </scroll-view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
            };  
        },  
        onLoad() {},  
        methods: {}  
    };  
</script>  
<style lang="scss" scoped>  
    .scroll-view {  
        height: 100vw;  
        /* overflow-y: auto; */  
        position: relative;  
        color: #fff;  
        text-align: center;  

        .header {  
            background-color: red;  
            height: 80rpx;  
            line-height: 80rpx;  
            position: sticky;  
            top: 0rpx;  
        }  

        .body {  
            background-color: green;  
            height: 800vh;  
        }  

        .line {  
            position: absolute;  
            top: 0;  
            height: 100%;  
            background-color: royalblue;  
            z-index: 2;  
        }  
    }  
</style>
  • 梅雨东风 (作者)

    可以了,谢谢大佬,非常有效。我也运行的h5端

    2024-06-29 09:06

要回复问题请先登录注册