-webkit-overflow-scrolling: touch

原创 2017年01月04日 03:09:57

-webkit-overflow-scrolling

主要用来设置在IOS浏览器的容器内滚动是否开启惯性和回弹的。

一般情况下都是设置为touch的

但是这回遇见一个bug

就是使用js改变其滚动的高度

el.scrollTop=100;

在ios环境中,每次手动改变csrollTop后整个容器变成空白,但是手指触摸一下内容就出来了,

scrollTop是成功的,只是内容绘制错误


思路就是砸手动设置scrollTop前 ,先关闭惯性滚动,带设置完成后重新开启即可。

el.WebKitOverflowScrolling = 'auto';
el.scrollTop = 500;
el.WebKitOverflowScrolling = 'touch';

相关文章推荐

网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现

现在很多for Mobile的H5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼。 要实现这个效果很简单,只需要加一行css代码即可: -webkit-overflow-scrol...
  • hursing
  • hursing
  • 2013年06月27日 13:50
  • 86490

-webkit-overflow-scrolling:touch;在本身没有滚动,动态加入内容撑大后不滚动的bug

When working with the overflow: scroll; attribute, the -webkit-overflow-scrolling: touch; attribute ...
  • ikmb
  • ikmb
  • 2017年03月11日 14:59
  • 1016

关于 -webkit-overflow-scrolling:touch 的小bug

最近在写页面时遇到一个页面长度刚刚超过手机高度一点,所以页面这时是可以上下滑动的,在安卓手机上滑动很流畅,但是在苹果手机上下滑动时会出现卡顿回弹等现象导致不流畅;故我给body加了body{ -w...

-webkit-overflow-scrolling 学习

当使用了-webkit-overflow-scrolling : touch; 后在Iphone 上的overflow:auto区块的滚动效果会变的更加顺畅,并且有弹簧效果...
  • ISaiSai
  • ISaiSai
  • 2016年02月23日 11:31
  • 1380

移动端常见的一些兼容性问题

1、安卓浏览器看背景图片,有些设备会模糊。 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率...

网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现

现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼。 要实现这个效果很简单,只需要加一行css代码即可: [css]...
  • Tsingsn
  • Tsingsn
  • 2017年07月20日 17:12
  • 171

网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现

现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼。 要实现这个效果很简单,只需要加一行css代码即可: [css]...
  • cddcj
  • cddcj
  • 2016年08月12日 10:16
  • 966

网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现

现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼。 要实现这个效果很简单,只需要加一行css代码即可: [css]...

解决Web移动端Fixed布局的方案(防止页面露底、overflow-scrolling、iOS下的 Fixed + Input BUG现象、isScroll.js)

一些细节处理 在细节处理上,其实还有很多要注意的,挑几个实际遇到比较大的问题来说一下: 有时候输入框 focus 以后,会出现软键盘遮挡输入框的情况,这时候可以尝试 input 元素的 s...

Adding iPhone Touch Scrolling to a UnityGUI ScrollView

Adding iPhone Touch Scrolling to a UnityGUI ScrollView http://www.mindthecube.com/blog/2010/09/addi...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:-webkit-overflow-scrolling: touch
举报原因:
原因补充:

(最多只允许输入30个字)