一次 H5 页面在 PC 端的滚动条与轮播图修复实例（Vue + Vant）

当前位置：点晴教程→知识管理交流 →『技术文档交流』

zhenglin

2026年1月6日 9:15 本文热度 366

本文旨在通过我的前端开发经历，从实操角度出发，帮助读者了解非PC浏览器中滚动条和轮播图的修复方法。

背景

最近在使用VSCode维护一个 已经打包好的 H5 页面（Vue + Vant），需求是：在信息屏中正确展示该页面。页面结构特点：

已编译完成（app.js / chunk-vendors.js）
使用 Vant 的 van-swipe 作为轮播图
页面原本是 移动端 H5，并非 PC 设计

在维护过程中，陆续出现了一系列问题：

右侧滚动条除了浏览器自带，但 页面浏览器消失
轮播图失效，所有图片横着排或者堆在一起
后期甚至出现 127.0.0.1 拒绝连接

这篇文章完整记录了 问题定位 → 错误尝试 → 正确解法 的全过程。

问题一：滚动条异常

现象

页面右侧滚动条消失

1️⃣ 初步排查：不是浏览器 Bug

通过 DevTools 发现：

body、.phone-content、内部容器同时设置了 overflow
页面存在类似代码：

body[unresolved] {
  overflow: hidden;
}

这是早期 SPA （单页应用）用于“防闪屏”的遗留写法。

2️⃣ 第一层正确修复（滚动条）

原则：页面只能有一个滚动容器让Body不滚动，#app滚动起来

html, body {
  height: 100%;
  margin: 0;
}


body {
  overflow: hidden;
}


#app {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

效果：滚动条出现在容器内部

问题二：轮播图失效，图片全部横着排列

现象

原本的轮播图变成：

[ 半张图 ][ 图 ][半张图 ]

滑动失效，但小圆点仍然存在

1️⃣ 第一误判（常见坑）

一开始以为是：

flex 问题
display: block 问题
CSS 把轮播“弄坏了” 于是尝试了大量强制恢复文档流的 CSS：

代码高亮：
position: static !important;
display: block !important;

结果：轮播结构被破坏，问题更严重

2️⃣ 关键事实：轮播 JS 正常

发现：

<div class="van-swipe__track"
     style="transform: translateX(-2176px); width: 2720px;">

这说明：

JS 已经计算宽度
transform 在变化
轮播并没有失效

3️⃣ 真正原因：容器“看穿”了移动端轮播

关键点：

<div class="van-swipe-item" style="width: 544px;">

而容器宽度是：

.page_container {
  width: 900px;
}

也就是一屏能显示 1.8 张 slide

所以，确实是轮播在动，但旁边的 slide 被同时显示出来了

4️⃣ 修复方式

让每个 slide 上占满容器宽度

代码高亮：
 .van-swipe {
      width: 100%;
      max-width: 900px;
      margin: 10px auto;
      overflow: hidden;
      position: relative;
      background: transparent;
    }

    .van-swipe__track {
      display: flex;
      transition: transform 0.5s ease;
    }

    .van-swipe-item {
      flex: 0 0 100%;
      width: 100%;
    }