zoukankan      html  css  js  c++  java
  • 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%;
    }
    <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

  • 相关阅读:
    Oracle
    注解
    java 算法实现
    ConcurrentHashMap
    hashMap 1.8
    hashmap 1.7
    MySQL优化
    Mysql面试题
    tmux
    mysql 复制表结构、表数据的方法
  • 原文地址:https://www.cnblogs.com/zdz8207/p/web-css-ios-touch.html
Copyright © 2011-2022 走看看