处理IOS苹果设备的橡皮筋效果

iOS设备上会产生当用户滚动到一个内容的边界时，屏幕会出现弹性拉伸的动画效果（橡皮筋效果），以下为一种解决方案：

HTML部分：

<template>
    <view class="content">
        <!-- 列表 -->
        <scroll-view class="area-list" scroll-y="true">    
                
            <!-- 卡片网格 -->
            <view v-else class="area-grid">
            </view>
            
        </scroll-view>
        
    </view>
</template>

css部分：

/* 全局防止iOS橡皮筋效果 */
    page {
        overflow: hidden;
        height: 100%;
    }
    
    /* 防止body滚动 */
    body {
        overflow: hidden;
        height: 100%;
        position: fixed;
        width: 100%;
    }
    .content {
        height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: #f5f6f8;
        /* 为底部导航留空间 */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        /* 禁止iOS橡皮筋效果 */
        -webkit-overflow-scrolling: auto;
    }

    .area-list {
        flex: 1;
        padding: 0 32rpx;
        /* 确保滚动容器正确处理边界 */
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
        /* 防止滚动穿透 */
        overscroll-behavior: contain;
        box-sizing: border-box;
    }