-webkit-overflow-scrolling:touch介绍和碰到的坑
1.作用
可控制元素在移动设备有滚动回弹效果,可惯性滚动
2.适应场景
在ios移动端上,设置容器overflow-y:scroll;使容器内元素滚动时,滑动会很卡顿,使用-webkit-overflow-scrolling:touch;可以解决该问题。
原理:该属性开启了硬件加速
缺点:耗内存
3.引发的bug(仅ios)
3.1 在设置了该属性的滚动容器内手动设置scrollTop时容器会变空白,(内容绘制出错,应该是浏览器底层的问题)
3.2 手动设置scrollTop,某些机型上的scrollTop值改变了,但是页面不滚动
3.3 滑动时偶尔卡顿
4.解决方案
3.1 & 3.2(规避问题):在手动改变scrollTop前先将-webkit-overflow-scrolling属性设置为auto,scrollTop改变后再设置回touch
3.1: 可先让页面延时100ms再滚动1px,空白可以恢复正常
3.2:给容器的某个子元素高度加1px
3.3:给容器设置position:static
-webkit-overflow-scrolling:touch介绍和碰到的坑的更多相关文章
- LVS详细介绍以及遇到的坑
LVS详细介绍以及遇到的坑 一,概述 本文介绍了我搭建LVS集群的步骤,并且在使用LVS(Linux Virtual Server)过程中遇到的问题和坑, 二,LVS简单介绍 大家都知道,LVS中文意 ...
- 那些在BAE上部署node.js碰到的坑
在BAE上使用node.js半年多了,其中碰到了不少因为BAE云环境限制碰到的坑 写下来大家碰到了,也不用那么麻烦的去看好几天代码了,直接对症下药 官方公布的坑有: BAE是使用package.jso ...
- spring boot -- 无法读取html文件,碰到的坑
碰到的坑,无法Controller读取html文件 1. Controller类一定要使用@Controller注解,不要用@RestController 2. resource目录下创建templa ...
- 3D Touch介绍:电子秤App与快捷操作
随着iPhone6s与6s plus的到来,苹果给我们展现了一种全新的交互方式:重按手势.你可能知道,这个特性已经在Apple Watch和MacBook上推出了,不过那时叫Force Touch,就 ...
- git各种命令介绍以及碰到的各种坑
一.各种命令介绍: git pull:从其他的版本库(既可以是远程的也可以是本地的)将代码更新到本地,例如:'git pull origin master'就是将origin这个版本库的代码更新到本地 ...
- 微信小程序里碰到的坑和小知识
本文作者:dongtao 来自:授权地址 本人低级程序员,以下bug不能确保在其它地方可以以相同的原因复现.同时, 出现很多bug的原因是小程序的基本知识还有编码的基本功不到位造成 路还很长,共勉 ...
- 运行Appium碰到的坑们
运行Appium的时候,碰到的那些坑 1. java命令会出现error:could not open ...jvm.cfg 出现这种情况大多是因为电脑上之前安装过JDK,卸载重装之后,运行java命 ...
- 在win8.1下安装laravel5.1时碰到的坑不少,但总算搞掂,真有点不容易。
安装好php后,安装laravel的方法有如下几种. 1.先安装好composer, 再用composer下载资源并安装,命令如下: composer create-project laravel/l ...
- 关于使用nodejs的mysql查询时碰到的坑
今天在编写登录模块时,碰到一个隐蔽的坑,故记录一番 在使用Node.js的mysql模块的query方法时,查询语句使用了 `select password from login where name ...
随机推荐
- SpringBoot配置自定义美化Swagger2
1.添加maven依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>springf ...
- pyqt5-QPlainTextEdit普通文本
继承:QAbstractScrollArea QPlainText和QTextEdit大致功能实现差不多,不能有图片.框架.表格等 QPlainText是安行滚动的,QTextEdit是安像素滚动的 ...
- python-抽象类和抽象方法
需要模块 import abc 抽象类不能实例化 import abc class Animal(metaclass=abc.ABCMeta): #抽象类 @abc.abstractmethod # ...
- <el-menu>菜单标签(里面可以包括:<el-submenu>和<el-menu-item>)
<el-menu> 1.router属性,若使用router属性menu-item的index将对应router的path属性 2.mode,下拉菜单的模式分为horizontal和ver ...
- 【leetcode】1171. Remove Zero Sum Consecutive Nodes from Linked List
题目如下: Given the head of a linked list, we repeatedly delete consecutive sequences of nodes that sum ...
- shell练习--PAT题目1001:卡拉兹(Callatz)猜想(失败案例)
卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把 ( 砍掉一半.这样一直反复砍下去,最后一定在某一步得到 n=1.卡拉兹在 1950 年的世界 ...
- 手把手搭建K3cloud插件开发环境
最近几天在配置K3cloud开发环境,发现不论是产品论坛还是百度出来的结果,都不够满意,很多大咖给提供的环境搭建手册都是那个云山雾罩的PPT 也就是这个open.kingdee.com/K3Cloud ...
- 【CF1252F】Regular Forestation(重心,树同构)
题意:给定一棵n个点的树,问删去某个点之后所有的树同构,这样分割出来的树最多能有几棵 n<=4000 思路:分割成至少两个size相等的联通块之后size必定小于n/2,与树的重心的定义相同 预 ...
- 简单三步同步你的 VSCode 用户配置
https://www.cnblogs.com/knight-errant/p/10444777.html 设备重装,换设备,VSCode 又要重新配置了?不不不,简单三步,让你的 VSCode 配置 ...
- TreeSet 源码分析
TreeSet 1)底层由 TreeMap 支持的 Set 接口实现,Set 中的元素按照自然顺序或指定的比较器排序. 创建实例 /** * 支持此 Set 的底层的 TreeMap 对象 */ pr ...