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

body[unresolved] {
  overflow: hidden;
}

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%;
    }

效果：轮播、自动播放、小圆点全部恢复 #问题三：127.0.0.1 拒绝连接

原因

这是运行环境问题。 出现原因：

• 使用 http://127.0.0.1:xxxx/index.htm

• 本地服务器（Live Server / Python / Tomcat）已关闭

• 刷新时浏览器重新请求 → 被拒绝
  
  

解决方案

启动本地服务器 在项目目录中打开控制台，输入指令：

或 VSCode：

• 安装 Live Server

• 选中html文件，右键 → Open with Live Server

五、全过程踩坑总结

❌ 常见错误

✅ 正确原则

1. 先确认是不是组件（van-swipe）

2. 不要全局改 position / display

3. 优先从“宽度模型”入手

4. 移动端组件 ≠ PC 展示天然正确

六、结语

这次问题的本质：

一个移动端 H5 页面，不同浏览器可能不兼容

只要理解了：

• Vant Swipe 的设计前提

• PC 与移动端 viewport 的差异

• CSS 能做什么，不能做什么

问题其实是完全可控、可复现、可总结的。

如果你也遇到过：

• H5 页面在 PC 上“样式诡异”

• van-swipe 看起来像坏了

• 滚动条混乱

希望这篇踩坑记录能帮你少走弯路

参考文章：原文链接​