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. 20170720 Celery 异步任务处理到Sql Server 发生死锁

    -- 1.  异常提示情况如下: 需要解决为什么引起死锁 -- 叹气 原因: 在使用Celery 启用了 配置参数 CELERYD_CONCURRENCY = 10  表示开了10块线程池. 有好处, ...

  2. 报错解决——linux下执行sh出现异常"syntax error: unexpected end of file"

    有时我们在linux下执行一个sh文件,会报错“SYNTAX ERROR:UNEXPECTED END OF FILE”,这个现象主要是工作的系统环境改变造成的. 若最初脚本中是在windows下,使 ...

  3. Python3学习之路~6.4 析构函数

    析构函数是在实例释放.销毁的时候执行的,通常用于做一些收尾工作.比如说,关闭一些数据库连接.打开的临时文件等. #Author:Zheng Na class Role: # 构造函数 def __in ...

  4. 帝国cms建站总结-（分页）

    帝国cms分页代码文件t_functions.php 代码为: <?php if(!defined('InEmpireCMS')) { exit(); } define('InEmpireCMS ...

  5. Java的HashMap是如何实现的？

    以下内容转自:http://blog.csdn.net/vking_wang/article/details/14166593 1. HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储 ...

  6. 将常用的T-CODE收藏进 文件夹

    1:选中文件夹,右键>insert transaction>输入相应的t-code.

  7. Nginx解析PHP的原理 | CGI、FastCGI及php-fpm的关系

    Nginx解析PHP的原理,CGI/FastCGI以及PHP-Fpm的关系. 一.PHP+Nginx应运而生的场景.随着互联网的发展,用户对此接受面广,数据流的增大使得Web端的运行承载压力日益增大, ...

  8. Goland的使用

    一.安装Goland 一.Goland简介 Goland是由JetBrains公司旨在为go开发者提供的一个符合人体工程学的新的商业IDE.这个IDE整合了IntelliJ平台的有关go语言的编码辅助 ...

  9. Linux个人知识扩展：服务器几u的意思，网络带宽

    服务器几u的意思: 指的服务器大小规格 1U=4.45cm 2U=8.9cm 3U=4.45cm * 3 4U=4.45cm * 4 这指的是服务器的高度 现在的服务器为节省空间都是很扁的 U是服务器 ...

  10. dfs1321

    比较抽象吧,看到题时一点思想也没有,参考了别人的代码才知道...渣渣 #include <iostream>#include <stdio.h>#include <str ...