【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. CSS常识

    1.给一个div设置边框:border:1px #CCCCCC bold; 2.给DOM加小手:cursor:pointer; 取消小手:cursor:auto;

  2. IOS8 UIAlertController 弹框

    本文转载至 http://blog.csdn.net/jinkaiouyang/article/details/35551769 IOS8中,Apple将UIActionSheet和UIAlertVi ...

  3. unity 接触一个月的感受和心得

    unity scrollview 遇到的问题 一个scrollview作为翻页,这样的效果调整. 一页上面有三个scrollview,这三个scrollview上的items不受下层整个页面的scro ...

  4. Windows踩坑笔记之使用_tWinMain报错的解决方案

    对于如下代码 #include <Windows.h> int WINAPI _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, ...

  5. 剑指Offer：调整数组顺序使奇数位于偶数前面【21】

    剑指Offer:调整数组顺序使奇数位于偶数前面[21] 题目描述 输入一个整形数组,实现一个函数来调整该数组中数字的顺序,使得所有奇数位于数组的前半部分,所有偶数位于数组的后半部分. 解题分析 使用插 ...

  6. Vue一次性简洁明了引入所有公共组件

    使用场景 -在开发过程中,往往会有很多自己定义公用组件,我们通过import 导入,components挂载到实例上就行,项目刚开始还好,但是随着项目迭代,组件越来越多,同一个组件不同的方式用需要重复 ...

  7. 使用eclipse的SVN连接码云

    码云配置: 码云的项目上,启用SVN访问 eclipse的配置,不配置这个会报错

  8. 【转载】Myeclipse中实现js的提示

    近期需要大量使用JS来开发,但是MyEclipse2014自带的JS编辑器没有代码提示的功能,开发效率有点低,所以安装了一个Spket的插件,过程非常简单,SVN插件的安装比这个更简单. Spket插 ...

  9. C++中map容器的说明和使用技巧

    C++中map容器提供一个键值对容器,map与multimap差别仅仅在于multiple允许一个键对应多个值. 一.map的说明 1 头文件 #include <map> 2 定义 ma ...

  10. bleve搜索引擎是支持基于field搜索的

    Query String Query The query language query allows humans to describe complex queries using a simple ...