iOS 16及以下Safari中Vue2聊天页面自动上滚问题求助

针对你遇到的Laravel+Vue2聊天应用在iOS16及以下Safari中自动上滚的问题，下面是几个针对性修复方案：

1. 修复滚动容器的CSS兼容性 #

iOS老版本Safari对flex-direction: column-reverse结合overflow: auto的处理存在兼容性bug，给滚动容器添加webkit专属滚动属性并调整高度计算逻辑：

.content-detail {
    padding: 10px 15px;
    width: 100%;
    /* 改用viewport高度计算，避免calc在老iOS中的解析问题 */
    height: 100vh;
    min-height: -webkit-fill-available;
    background: #FDECD2;
    overflow: auto;
    /* 开启iOS原生滚动优化 */
    -webkit-overflow-scrolling: touch;
    /* 禁用滚动溢出行为干扰 */
    overscroll-behavior: contain;

    margin-top: 68px;
    margin-bottom: 54px;
    display: flex;
    flex-direction: column-reverse;

    @media (max-width: 768px) {
        @supports (-webkit-touch-callout: none) {
            padding: 10px 15px 94px 15px;
            margin-bottom: 0;
            height: calc(100vh - 68px);
        }
        @supports not (-webkit-touch-callout: none) {
            padding: 10px 15px 64px 15px;
            margin-bottom: 0;
            height: calc(100vh - 68px);
        }
    }
}

2. 手动强制控制滚动位置 #

在页面初始化完成和发送消息后，强制将滚动容器滚动到底部，利用Vue的$nextTick确保DOM渲染完成后执行：

// 在Vue组件中添加相关方法与生命周期钩子
methods: {
    scrollToBottom() {
        this.$nextTick(() => {
            const contentEl = this.$refs.content;
            if (contentEl) {
                // 针对iOS老版本，使用scrollTop而非scrollTo提升兼容性
                contentEl.scrollTop = contentEl.scrollHeight;
                // 针对极端情况添加短延迟重试
                setTimeout(() => {
                    contentEl.scrollTop = contentEl.scrollHeight;
                }, 50);
            }
        });
    },
    sendMessage() {
        // 你的消息发送逻辑...
        this.talkStoreMessages.push(newMessage);
        this.scrollToBottom();
    }
},
mounted() {
    // 页面加载完成后自动滚动到底部
    this.scrollToBottom();
}

3. 禁用浏览器自动聚焦行为 #

iOS Safari可能会自动聚焦页面元素导致滚动偏移，给滚动容器添加tabindex="-1"避免意外聚焦，并配置passive触摸事件提升流畅度：

<div 
    class="content-detail" 
    ref="content" 
    @scroll="handleScroll"
    tabindex="-1"
    @touchmove.passive="true"
>
    <!-- 消息列表内容 -->
</div>

额外说明 #

你之前尝试的动态切换overflow属性方案无效，是因为iOS老版本Safari修改overflow时会触发重排，反而加剧滚动偏移。上面的方案从CSS兼容性、手动滚动控制、行为阻止三个维度覆盖了老iOS Safari的常见滚动bug场景。

内容的提问来源于stack exchange，提问作者Nor3soN