【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. Xcode5.1.1+ios 7.1.2 免证书真机调试

    Xcode假设不破解.无法真机调试, 也无法编译真机Release文件.仅仅有付费开通Apple开发人员账号,才干申请真机调试.而Xcode进行破解后,结合越狱的iPhone或iPad, 就可以免官方 ...

  2. NVIDIA GPU架构与原理分析（一）——GPU简介与主流Fermi、Kepler架构GPU概述

    1 GPU简介 图形处理单元GPU英文全称Graphic Processing Unit,GPU是相对于CPU的一个概念,NVIDIA公司在1999年发布GeForce256图形处理芯片时首先提出GP ...

  3. 【BZOJ4668】冷战 并查集

    [BZOJ4668]冷战 Description 1946 年 3 月 5 日,英国前首相温斯顿·丘吉尔在美国富尔顿发表“铁幕演说”,正式拉开了冷战序幕. 美国和苏联同为世界上的“超级大国”,为了争夺 ...

  4. 从前端看JavaWeb软件工程中的解耦合

    以下为作者备忘,详情请看 http://www.cnblogs.com/feichengwulai/articles/3412946.html http://blog.csdn.net/piantou ...

  5. EasyIPCamera通过RTSP协议接入海康、大华等摄像机，摒弃私有SDK接入弊端

    本文转自博客:http://blog.csdn.net/xinlanbobo/article/details/53156742 近期工作中需要开发一套视频监控系统,实现WEB端.手机APP端预览局域网 ...

  6. Spring中的JDBC操作

    一.Spring模板JdbcTemplate 为了使 JDBC 更加易于使用, Spring 在 JDBC API 上定义了一个抽象层, 以此建立一个 JDBC 存取框架JdbcTemplate. 作 ...

  7. 【智能无线小车系列八】在树莓派上使用USB网卡

    在这个腾“云”驾“物”(云:云计算,物:物联网)的时代,什么都可以没有,就是不能没有网络,树莓派也离不开它.本章节将详细介绍如何将树莓派接入互联网,因为有一些后期将要使用到的小软件需要联网进行下载和安 ...

  8. 盒子的display属性

    <body> <div style="display:inline">Box-1</div> <div style="displ ...

  9. Ext rowcontextmenu回调

    今天栽了大跟头,,,, EXT js右键可以获取到选中的那一列的索引值,只需在回调函数中取到那一列的数据就可以ok,不用再费尽心思的费用执行click的事件 grid.on("rowcont ...

  10. javascript中获取class

    js中没有获取class的办法,找了一些封装好的方法,这里整理一下 (1)先进行封装 //封装getClass function getClass(tagName,className) //获得标签名 ...