信息发布→ 登录 注册 退出

如何修复移动端 Hero 区域无法滚动的问题

发布时间:2026-01-13

点击量:

移动端 hero 区域无法滚动,通常由轮播插件(如 owl carousel)默认启用了触摸拖拽(`touchdrag: true`)并劫持了原生滚动事件所致;将 `touchdrag` 设为 `false` 即可恢复页面正常纵向滚动。

在您的网站(https://www./link/051c04b3816292c5145c6fe53c025719)中,Hero 区域使用了 Owl Carousel 轮播组件。该插件在移动端默认启用 touchDrag: true,导致用户手指在轮播图上垂直滑动时,事件被插件捕获并用于横向切换幻灯片,从而阻止了浏览器原生的页面纵向滚动行为——这正是 Hero 区域“卡住不下滑”的根本原因。

✅ 正确解决方案:
在初始化 Owl Carousel 实例时,显式将 touchDrag 选项设为 false(同时建议一并设置 mouseDrag: false,避免桌面触控板误触发):

$('.hero-carousel').owlCarousel({
  loop: true,
  margin: 0,
  nav: false,
  dots: true,
  items: 1,
  touchDrag: false,    // ? 关键:禁用触摸拖拽
  mouseDrag: false,    // ? 建议同步禁用鼠标拖拽
  responsive: {
    0: { autoplay: true, autoplayTimeout: 5000 }
  }
});

⚠️ 注意事项:

  • 若您使用的是全局配置或通过 data- 属性初始化(如 ),请确保对应属性值改为 data-touch-drag="false";
  • 修改后务必清空浏览器缓存并硬刷新(Ctrl+F5 / Cmd+Shift+R),避免旧版 JS 文件被缓存;
  • 不要依赖 z-index 调整来解决此问题——滚动阻塞是事件拦截导致的逻辑问题,而非层叠上下文异常;
  • 如需保留轮播交互但又允许用户在 Hero 区域内自然滚动,可考虑监听 touchstart 事件判断滑动方向,动态启用/禁用 touchDrag(进阶方案,需额外开发)。
  • 总结:touchDrag: false 是 Owl Carousel 在全屏 Hero 场景下的推荐配置。它让轮播保持自动播放与点选切换能力,同时将垂直滑动权交还给浏览器,彻底解决移动端无法滚动的体验缺陷。

标签:# js  # git  # 浏览器  # class  
在线客服
服务热线

服务热线

4008888355

微信咨询
二维码
返回顶部
×二维码

截屏,微信识别二维码

打开微信

微信号已复制,请打开微信添加咨询详情!