【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

解决overflow: auto在Ios中滑动不流畅的更多相关文章

  1. 【解决ViewPager在大屏上滑动不流畅】 设置ViewPager滑动翻页距离

    在项目中做了一个ViewPager+Fragment滑动翻页的效果,在模拟器和小米手机上测试也比较正常.但是换到4.7以上屏幕测试的时候发现老是滑动失效. 因为系统默认的滑动策略是当用户滑动超过半屏之 ...

  2. ios浮层滑动不流畅解决方案

    前段时间做了一个浮层,但在ios上,浮层滑动不流畅,基本上是随着手指的移动而移动,经研究加上-webkit-overflow-scrolling: touch即可 eg: <!DOCTYPE h ...

  3. 解决移动端在IOS中input输入框光标过长

    在输入框样式中加入: line-height:20px;

  4. html页面在苹果手机内，safari浏览器，微信中滑动不流畅问题解决方案

    1. -webkit-overflow-scrolling:touch是什么? MDN上是这样定义的: -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效 ...

  5. 【bug】—— H5页面在 ios 端滑动不流畅的问题

    IOS系统的惯性滑动效果非常6,但是当我们对div加overflow-y:auto;后是不会出这个效果的,滑动的时候会感觉很生涩.怎么办? 方案一: 在滚动容器内加-webkit-overflow-s ...

  6. overflow:scroll 在 iOS上滚动不流畅的问题

    添加下面属性: -webkit-overflow-scrolling: touch;

  7. 解决iPhone滑动不流畅问题

    前段时间在做一个手机端的页面时遇到了iOS上滑动不流畅的问题,后来才发现安卓上没有问题,才意识到这是兼容性问题引起的,所以遇到问题后快速定位到问题根源非常重要.在网上一搜就找到了解决方案.以后遇到类似 ...

  8. ios下元素溢出设置 overflow:auto; 不能滑动解决办法

    ios下元素溢出设置 overflow:auto; 不能滑动解决办法: overflow:auto; overflow-y:scroll; -webkit-overflow-scrolling:tou ...

  9. 解决页面使用overflow: scroll，overflow-y:hidden在iOS上滑动卡顿的问题

    解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题 div{ width: 100%; overflow-y: hidden; -webkit-o ...

随机推荐

  1. LeetCode(15)题解--3Sum

    https://leetcode.com/problems/3sum/ 题目: Given an array S of n integers, are there elements a, b, c i ...

  2. 在Eclipse中建立Maven Web项目

    一.软件版本 Eclipse Java EE IDE for Web Developers. Version: Neon Release (4.6.0) Maven 3.3.9 Servlet 2.5 ...

  3. ECMAscript 没有对该方法进行标准化，因此反对使用它。 es 日期格式化

    JavaScript substr() 方法 http://www.w3school.com.cn/jsref/jsref_substr.asp 注释:substr() 的参数指定的是子串的开始位置和 ...

  4. WildFly JBoss 应用程序服务器

    https://en.wikipedia.org/wiki/WildFly [实现基于面向服务的架构SOA的web应用和服务] WildFly,[1] formerly known as JBoss ...

  5. Hadoop实战-Flume之Hello world(九)

    环境介绍: 主服务器ip:192.168.80.128 1.准备apache-flume-1.7.0-bin.tar文件 2.上传到master(192.168.80.128)服务器上 3.解压apa ...

  6. Javascript学习之正则表达式详解

       什么是正则表达式(regular expreSSion) 正则表达式是一个描述字符模式的对象. 可以处理更复杂的字符串 JavaScript中的正则表达式使用RegExp对象表示 正则表达式用于 ...

  7. 挂断电话demo

    <!-- 结束通话和打电话的权限 --> <uses-permission android:name="android.permission.CALL_PHONE" ...

  8. ansible-playbook 打通ssh无秘钥

    建议参考: http://www.cnblogs.com/jackchen001/p/6514018.html 这个代码清晰,效果佳! 参考链接: http://www.cnblogs.com/cao ...

  9. 【概念】SVG(2)

    Style <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg&qu ...

  10. hdu-5742 It's All In The Mind(数学)

    题目链接: It's All In The Mind Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 65536/65536 K (J ...