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%;

}
<body>

    <div class="wrapper">

        <div class="container" id="container">

            <div class="row">

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

下面是找到的相关资料

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

在容器里设置或者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

bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法的更多相关文章

  1. ios h5 app avalon tap点击事件失效及点击延迟300ms问题解决方法

    1.ios h5 app avalon tap事件失效 使用MUI制作app界面,使用avalon.js渲染数据,发现在(Android上正常)ios上运行时容器div的avalon的ms-on-ta ...

  2. h5页面滑动卡顿解决方法

    解决方式: 给滚动的元素加样式:-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling(允许独立的滚动区域和触摸回弹) 如果值为au ...

  3. 使用apicloud开发移动端APP,IOS list页面滚动卡顿解决记录

    给内容容器添加样式:-webkit-overflow-scrolling:touch; -webkit-overflow-scrolling:属性控制元素在移动设备上是否使用滚动回弹效果. auto: ...

  4. overflow属性及其在ios下卡顿问题解决

    overflow属性:http://www.w3school.com.cn/cssref/pr_pos_overflow.asp overflow:scroll/auto;在手机页面滑动不流畅问题: ...

  5. overflow:scroll 在ios 滚动卡顿

    使用 -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. 值 auto 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止. touch 使用具有回 ...

  6. iOS 疑难杂症 — — UIButton 点击卡顿/延迟

    前言 一开始还以为代码写的有问题,点击事件里面有比较耗时卡主线程的代码,逐一删减代码发现并不是这么回事. 声明  欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.c ...

  7. iOS 添加阴影后 屏幕卡顿 抖动

    - (void)awakeFromNib { // Initialization code _btnViews.layer.shadowPath =[UIBezierPath bezierPathWi ...

  8. 解决微信小程序ios端滚动卡顿的问题

    方案1:直接使用微信小程序提供的 “scroll-view " 组件. <scroll-view scroll-y style="height: 100%;"> ...

  9. H5中滚动卡顿的问题

    加入-webkit-overflow-scrolling: touch;即可

随机推荐

  1. OC照片选择器MJPhotoBrowser

    图片选择器,看cocoachina发现一个有趣的框架,很好用,分享一下,其实做出该功能我之前写过一篇博客,使用转场动画写的,就是图片的手势缩放没写,有兴趣可以看看 效果图: github地址:http ...

  2. adb移动端测试

    1. Android介绍 Android 是google公司主导的一个开放的手机操作系统,不过目前已经超过了手机的局限,而定位于移动设备的操作系统. Android一词的本义指“机器人”,取名原因很简 ...

  3. Apache服务介绍

    http服务器程序 httpd             服务名称 apache         软件包名 特性: 高度模块化:   core + modules DSO:  Dynamic Share ...

  4. abap 从屏幕输入数据

    1: 从屏幕输入数据: 直接定义parameters类型(该类型的变量名不能超过8个字符. REPORT ZHANSEN34. *SELECTION-SCREEN BEGIN OF LINE. * S ...

  5. js中的offsetLeft和style.left

    (1)style.left是带单位"px"的,而offsetLeft没有单位,另外,style.left必须是内联样式,或者在JS中通过style.left赋值,否则取得的将为空字 ...

  6. tf实现LSTM时rnn.DropoutWrapper

    转自:https://blog.csdn.net/abclhq2005/article/details/78683656 作者:abclhq2005 1.概念介绍 所谓dropout,就是指网络中每个 ...

  7. Linux系统文件目录

    下面的示例是我个人的亚马逊云服务器,查看了几个关键目录的文件信息. 可以注册一个账号,免费试用一年,自己用来玩,还是很不错的 .https://aws.amazon.com/cn/ec2/ 根目录下面 ...

  8. Linux下修改MySQL数据库字符编码为UTF-8解决中文乱码

    由于MySQL编码原因会导致数据库出现乱码. 解决办法: 修改MySQL数据库字符编码为UTF-8,UTF-8包含全世界所有国家需要用到的字符,是国际编码. 具体操作: 1.进入MySQL控制台 &g ...

  9. vue项目中别个访问你的本地调试需要改东西

  10. selenium元素高亮显示

    selenium元素高亮显示: 采用js注入的方式,通过更改元素样式来实现. border:2px 边框  solid red 红色 def hightlight(self,element): &qu ...