uni-app 新版本HBuilder中 app下scroll-view与fixed兼容问题

uni-app 新版本HBuilder中 app下scroll-view与fixed兼容问题

测试过的手机

小米6 MIUI11，iPhone se

示例代码：

<template>  
    <scroll-view class="content_test" :scroll-y="true" @scroll="pageScroll">  
        <p>1</p>  
        <p>1</p>  
        <p>1</p>  
        <p>1</p>  
        <p>1</p>  
        <p>1</p>  
        <div :class="['point',isFloat?'fixed':'relative']">点</div>  
        <p v-for="(item,index) of 200" :key="index">{{isFloat}}</p>  
        <p>2</p>  
    </scroll-view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                isFloat: false  
            }  
        },  
        methods: {  
            //监听页面滚动条移动  
            pageScroll(e) {  
                // console.log("e.detail.scrollTop",e.detail.scrollTop);  
                if (e.detail.scrollTop >= 60) {  
                    this.isFloat = true;  

                } else {  
                    this.isFloat = false;  
                }  
                console.log(this.isFloat);  
            }  
        }  
    }  
</script>  

<style scoped>  
    .content_test {  
        width: 100%;  
        height: 600rpx;  
        box-sizing: border-box;  
    }  

    .point {  
        background-color: red;  
        color: white;  
    }  

    .fixed {  
        position: fixed;  
        left: 0;  
        top: 0px;  

    }  

    .relative {  
        position: static;  
    }  

    p {  
        height: 10px;  
        line-height: 10px;  
        width: 100%;  
        color: white;  
        background: green;  
    }  
</style>

操作步骤：

  • 创建一个新页面，将代码，copy到新页面中

预期结果：

  • scroll-view是父标签，scroll-view标签里有个position:fixed的定位的子元素，scroll-view页面滚动时，position:fixed的子元素不跟着滚动

实际结果：

  • scroll-view是父标签，scroll-view标签里有个position:fixed的定位的子元素，scroll-view页面滚动时，position:fixed的子元素跟着滚动

bug描述：

  • scroll-view是父标签，scroll-view标签里有个position:fixed的定位的子元素，scroll-view页面滚动时，position:fixed的子元素跟着滚动。app上有这个问题，小程序没事

更多关于uni-app 新版本HBuilder中 app下scroll-view与fixed兼容问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

https://ask.dcloud.net.cn/question/132288 官方回复的HBuilderX 3.2.10 alpha 已修复这个问题

更多关于uni-app 新版本HBuilder中 app下scroll-view与fixed兼容问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的 App 端，scroll-view 内部使用 position: fixed 确实存在兼容性问题。这是因为在原生渲染模式下，fixed 定位的参照物并非整个视窗，而是其父容器 scroll-view，导致元素会跟随滚动。

解决方案：

  1. 将 fixed 元素移出 scroll-view： 将需要固定定位的元素放在 scroll-view 外部，通过绝对或固定定位控制位置。

    <template>
    <scroll-view class="content_test" :scroll-y="true" @scroll="pageScroll">
        <!-- 内容 -->
    </scroll-view>
    <div :class="['point', isFloat ? 'fixed' : 'relative']">点</div>
</template>

  2. 使用 position: sticky 替代（部分支持）： 如果只需要在顶部固定，可尝试 sticky 定位，但需注意浏览器兼容性。

    .sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

  3. 通过动态样式控制位置： 监听滚动事件，动态计算并设置元素的 top 值，模拟固定效果。

    pageScroll(e) {
    const scrollTop = e.detail.scrollTop;
    this.isFloat = scrollTop >= 60;
    if (this.isFloat) {
        // 通过样式绑定动态设置 top
    }
}
回到顶部