iOS和Android中H5页面兼容问题

最新推荐文章于 2024-12-29 23:01:13 发布

原创最新推荐文章于 2024-12-29 23:01:13 发布 · 3.1k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了如何解决Android设备上不美观的滚动条显示问题，并提供了隐藏滚动条的CSS样式代码。同时，针对iOS设备上的滑动卡顿和scroll事件延迟问题，给出了相应的解决方案，包括使用touchmove事件代替onscroll事件。

1、Android滚动条问题
Android手机中除了页面本身的那个比较细长的滚动条外还停靠了一个又宽又短的，比较影响美观，可以用一下方法将其隐藏，iOS没有。

	 html, body {
        height: 100%;
        overflow: auto;
      }
      // 下面设置成body也可以，两者只需设置一个即可，但是上面的height必须都设置
      html::-webkit-scrollbar {
        display: none;
      }

2、iOS滑动卡顿问题
当为body设置height: 100%时，页面会卡顿，所以没有特殊情况不要设置height，如果必须设置需要加上：

-webkit-overflow-scrolling: touch;

3、iOS滚动scroll事件
滚动事件只有停止滚动时才会触发回调函数，原因是：ios的webview 内核设定了其在进行momentum scrolling(弹性滚动)时，会停止所有的事件响应及 DOM操作引起的页面渲染，故 onscroll 不能实时响应。这明显无法满足页面需求，可以在元素上添加touchmove事件。