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>
梅雨东风 (作者)
可以了,谢谢大佬,非常有效。我也运行的h5端
2024-06-29 09:06