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. git push error:error: insufficient permission for adding an object to repository database ./object解决

    在服务器代码库xxx.git文件夹中:1.sudo chmod -R g+ws *2.sudo chgrp -R mygroup * //mygroup是该文件夹的所有组3.git repo-conf ...

  2. MySQL忘记root密码--不重启mysqd重置root密码

    先提个问题:如何不重启mysqld,且没有权限修改用户账号和权限的情况下,如何重新设置root密码?不知道没关系,在此之前我也是不知道如何操作的,先看看下面的几种重置root密码的方法. 1.skip ...

  3. （4.6）mysql备份还原——深入解析二进制日志（2）binlog参数配置解析

    关键词:binlog配置,binlog参数,二进制日志配置,二进制文件参数配置 关键词:binlog缓存,binlog 刷新 0.bin写入流程 写binlog流程如下:# 数据操作buffer po ...

  4. MongoDB的客户端管理工具--nosqlbooster 连接MongoDB服务器

    nosqlbooster的官网地址为https://nosqlbooster.com.大家如果想直接下载,可以登入下载网址https://nosqlbooster.com/downloads. 下载w ...

  5. 20181220 Oracle程序包基本开发逻辑

    做事情,开始也许比较迷茫,也可能工具不会,也可能语言不会,但不要害怕 多去思考而不是盲目的开始工作,盲目的听从,程序开发都是不断训练自己的思维能力. 做每件事情都是有意义的,思考为什么这么做,这么做的 ...

  6. what's the python之自定义模块和包

    模块自定义 上节说了有关模块的知识,当时所说的模块都是内置模块,现在来看自己定制的模块,即模块也可以自定义. 模块的自定义就是指写一段python文件,一般情况下里面包含了可执行的语句和函数的定义,其 ...

  7. EditText的一些使用技巧

    1.让EditText不自动获取焦点 将EditText的某个父级控件设置成 android:focusable="true" android:focusableInTouchMo ...

  8. ie8以下兼容圆角等css3的属性

    <!--[if lt IE 10]> <script type="text/javascript" src="PIE.js"></ ...

  9. 字符串转化为int数组

    String a = "1,2,3,4,5,6" String str[] = a.split(","); int array[] = new int[str. ...

  10. php 文件远程下载

    getFile(“http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg”,”,’xuxin’);/*** php实现下载远程图片保存到本地 ...