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. AMI：加密的机器映像。卷

    (一)定义:镜像AMI (Amazon Machine Image,机器映像)是一个可以将操作系统.用户的应用程序.配置等一起打包的加密机器映像.用于启用实例的预配置服务器模板.每个 AMI 由一个操 ...

  2. RN全局的变量，方法，全局类，全局类方法

    为了方便学习,很简单的小Demo,不懂可以下方留言,百分百原创,相互学习,相互进步 全局的方法 创建一个js文件,命名OvallAll //全局的方法 //这里export default 只能输出一 ...

  3. Hibernate的状态

    最新的Hibernate文档中为Hibernate对象定义了四种状态(原来是三种状态,面试的时候基本上问的也是三种状态),分别是:瞬时态(new, or transient).持久态(managed, ...

  4. 启动Jmeter4.0 后弹出警告： WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at root 0 x80000002. Windows RegCreateKeyEx(...) returned error code 5.

    启动Jmeter4.0 后弹出命令窗口提示信息: WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at r ...

  5. 011-docker-安装-rabbitmq-management:3.7.13

    1.搜索镜像 docker search rabbitmq 2.拉取合适镜像 选择合适tag:https://hub.docker.com/,下载3.7.13 带web管理界面版本 docker pu ...

  6. 001-RLE算法

    一.定义 RLE全称(run-length encoding),翻译为游程编码,又译行程长度编码,又称变动长度编码法(run coding),在控制论中对于二值图像而言是一种编码方法,对连续的黑.白像 ...

  7. asp.net乱码问题

    1.html文件乱码 html文件是有编码方式的,比如"UTF-8"."GB2312". A.VS中在文件选项,文件另存为...,保存右边的下拉框编码保存... ...

  8. HBase学习总结(1)

    HBase是一种数据库:HadoopDatabase顾名思义就是Hadoop数据库,它是一种基于hadoop文件系统HDFS的一种分布式数据库,专门设计用来快速随机读写大规模数据.本文介绍HBase的 ...

  9. [redis]redis常用

    https://redis.io/topics/quickstart $ redis-cli ping PONG redis-server is the Redis Server itself. re ...

  10. 2019.03.30 图解HTTP

    文章来源<图解HTTP> 第一章 了解Web及网络基础 你有想过当你在浏览器(web browser)的地址栏上输入URL时,Web页面是如何实现的吗? 嗯,好像也没想过 web使用一种名 ...