学院新闻

拥抱AI未来 | 非凡教育助力信旅(上海)国旅探索ChatGPT技术应用......

常见的学习H5前端开发中会遇到的问题及解决方法

非凡教育发布日期:2022-10-09 阅读:

非凡教育分享给你常见的H5前端开发问题及解决方法，很多做H5前端开发的设计师都会遇到IOS滑动不流畅的问题。非凡教育资深H5前端开发讲师教你如何解决IOS滑动不流畅的问题。

iOS滑动不流畅：
上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。

iOS滑动不流畅产生原因：
为什么 iOS的webview中滑动不流畅，它是如何定义的？
最终我在 safari 文档里面寻找到了答案。原来在 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */
iOS滑动不流畅解决方案
1.在滚动容器上增加滚动 touch 方法
将-webkit-overflow-scrolling 值设置为 touch
.wrapper {
    -webkit-overflow-scrolling: touch;
}
设置滚动条隐藏： .container ::-webkit-scrollbar {display: none;}
可能会导致使用position:fixed; 固定定位的元素，随着页面一起滚动
2.设置 overflow
设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。
body {
    overflow-y: hidden;
}
.wrapper {
    overflow-y: auto;
}
两者结合使用效果更佳！

上一篇：学习H5前端开发一般会遇到哪些问题？

学院新闻

常见的学习H5前端开发中会遇到的问题及解决方法

申请免费课程试听