使用overflow-x: hidden无法禁用横向滚动的问题解决请求

1. 修复模板逻辑顺序错误 #

你的模板中v-else的位置在v-else-if="type === 'offer'"之前，导致Offer类型的模板永远不会被渲染——v-else会匹配所有非product的情况，Offer分支被完全跳过。正确的模板顺序应该是：

<div class="feed-wrapper" :class="{ 'no-horizontal-scroll': type === 'offer' }">  
    <template v-if="type === 'product'">  
        <product-item section="members-circle" :item="product" v-for="product in data" :key="product.slug"></product-item>  
    </template>  
    <template v-else-if="type === 'offer'">  
        <offers-item :offer="offer" v-for="offer in data" :key="offer.brand" ></offers-item>  
    </template>  
    <template v-else>  
        <article-item v-for="article in data" :key="article.id" :article="article" :type="type"></article-item>  
    </template>  
</div>

2. 针对性覆盖滚动样式 #

假设你的feed-wrapper默认开启横向滚动的样式是类似这样的：

.feed-wrapper {
    overflow-x: auto; /* 或者 scroll */
    display: flex;
    /* 其他横向滚动相关样式 */
}

现在通过动态添加的no-horizontal-scroll类来禁用滚动：

.feed-wrapper.no-horizontal-scroll {
    overflow-x: hidden;
    /* 取消强制不换行，避免内容撑开容器 */
    flex-wrap: wrap;
}

/* 确保Offer项不会超出容器宽度 */
.offer-item-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box; /* 防止padding/border额外撑开宽度 */
}

3. 排查额外滚动触发点 #

如果上述设置后仍有横向滚动，检查以下几点：

• 确认offer-item内部的brand-image、offer-item等元素是否设置了大于100%的固定宽度，需调整为max-width: 100%
• 检查feed-container是否继承了横向滚动样式，需确保在Offer类型下也设置overflow-x: hidden
• 移除可能存在的white-space: nowrap样式，避免强制内容单行显示撑开容器

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