解决H5页面无法滚动

最新推荐文章于 2024-01-24 09:30:03 发布

Razas

最新推荐文章于 2024-01-24 09:30:03 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： H5

本文链接：https://blog.youkuaiyun.com/qq_25354709/article/details/84680202

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

本文探讨了在H5页面中遇到的一个特定问题：在安卓设备上无法滚动，而在苹果设备上正常。问题根源在于CSS的touch-action属性设置为none，移除此样式后问题得以解决。文章还提供了页面布局和结构的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题一：

在苹果手机可以，但安卓手机不可以。

H5页面没有使用任何滚动插件，比如： iscroll.min.js 或者 Better Scroll。

这里是因为：

* {
    touch-action: none;
}

这段代码，会导致安卓手机H5页面无法滚动，而苹果手机可以。使用 iscroll.min.js 或者 Better Scroll 也没用。

将这段代码去掉即可。

其他的样式的设置：

html {
    font-size: 100px;
}

html, body {
    width: 100%; /*-- height:100%; 不用写，如果写了，表示只用这一屏 --*/

    overflow-x: hidden;
}


/*-- 最外层边框, 宽度用js去控制。超过640px时，让它宽度固定在640px --*/
#main {
    margin: 0 auto;
    max-width: 6.4rem;
}

HTML页面：

<!-- 中间区域 -->
<div id="main">

    <!-- 轮播图 -->
    <section class="swiper-container"></section>

    <!-- NAV -->
    <section class="nav clearfix"></section>

    <!-- PRODUCT -->
    <section class="product"></section>


</div>
<!-- 中间区域 -->