bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法

bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法

bootsrtap框架做的h5页面，在android手机下没有卡顿问题，在苹果手机就一直存在这问题，开始毫无头绪，经过多次测试，更换版本，查找bootsrtap官方案例网站最终确定不是

bootsrtap框架本身的问题，然后排除网页结果问题，布局问题，js问题，样式问题，内容长度问题，所以当时想到的地方都改过测试了也没有解决。

最后只能认为的苹果手机ios的兼容性问题了，按照苹果手机 ios 拉动 卡顿 触屏 去搜索还真搜索到了很多相关问题，很多人遇到ios卡顿问题，但把网上所有方法都试了一遍也还是没有解决。在准备放弃的时候突然调试成功了，成功代码如下：

html, body {
    font-family: "Microsoft Yahei","Microsoft JhengHei", arial, Verdana;
    font-size: 14px;
    height: 100%;
    width:100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; 
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width:100%;
}

.container {
    position : relative; 
    padding-left:0px;
    padding-right:0px;
    width:100%;
}

========================

下面是找到的相关资料

========================

在容器里设置或者html,body{-webkit-overflow-scrolling: touch;}
不知道是不是chrome模拟器不支持这个属性，模拟器上还是没解决那问题，看苹果开发文档应该iOS 5.0 以上版本是支持

实现滚动条丝滑滚动，流畅不卡顿，有回弹效果。-webkit-overflow-scrolling
实现横划的滚动列表，手指离开屏幕 滑动停止，而且明显有点卡顿感，那么怎么解决这个问题?

解决方式：给父类加-webkit-overflow-scrolling;touch 属性
解析：-webkit-overflow-scrolling;touch 属性控制元素在移动设备上是否使用滚动回弹效果

https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling

-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling

看了下苹果开发网站上的文档 iOS 5.0 以上版本是支持 -webkit-overflow-scrolling 属性的

==========================
https://blog.csdn.net/weiwenwen6/article/details/75007340
【bug】—— H5页面在 ios 端滑动不流畅的问题
IOS系统的惯性滑动效果非常6，但是当我们对div加overflow-y:auto;后是不会出这个效果的，滑动的时候会感觉很生涩。怎么办？
方案一：
在滚动容器内加-webkit-overflow-scrolling: touch

但这个方案有一个问题，在页面内具有多个overflow：auto的情况下，那些具有 绝对定位（absolute, fixed） 属性的元素，也会跟着滚动。

方案二：
body {overflow-x: hidden}

即，给 body 元素添加overflow-x：hidden。然后在滚动容器内加overflow-y: auto

===========================
在移动端html中经常出现横向/纵向滚动的效果,但是在iPhone中滚动速度很慢,感觉不流畅,有种卡卡的感觉,但是在安卓设备上没有这种感觉;
要解决这个问题很简单:
在滚动容器内加入 -webkit-overflow-scrolling: touch 样式

======================
禁止 ios scrolling:touch

深入研究-webkit-overflow-scrolling:touch及ios滚动 - 夏大师 - 博客园
https://www.cnblogs.com/xiahj/p/8036419.html

网页在Safari快速滚动和回弹的原理： -webkit-overflow-scrolling : touch;的实现 - CSDN博客
https://blog.csdn.net/hursing/article/details/9186199

===================

本人微信公众帐号： 心禅道（xinchandao）

本人微信公众帐号：双色球预测合买（ssqyuce）

         囤币一族(tunbitt)公众号二维码