移动端 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 }
}
});⚠️ 注意事项:
总结:touchDrag: false 是 Owl Carousel 在全屏 Hero 场景下的推荐配置。它让轮播保持自动播放与点选切换能力,同时将垂直滑动权交还给浏览器,彻底解决移动端无法滚动的体验缺陷。