-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
  • 92063

Vue.js手机端scroll事件的坑

延续之前的Vue.js的手机端开发,在滚动事件的时候遇到了很多问题,纪录下来,有的问题已经解决,有的留个坑,以后慢慢填~ 主要包括 iOS滚动混用   几个都有滚动的页面,在一个页面的滚动位置在链接到...
  • Iohboel
  • Iohboel
  • 2017年11月06日 15:35
  • 1673

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

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

-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
  • 1538

-webkit-overflow-scrolling 学习

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

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

现在很多的移动的HTML5网页内都有快速滚动和回弹的效果,看上去和原生应用的效率都有得一拼。 要实现这个效果很简单,只需要加一行CSS代码即可: [css] 查看纯文本  ...
  • pupilxiaoming
  • pupilxiaoming
  • 2017年09月13日 14:46
  • 251

Scrolling DIV and Canvas flicker on iPhone/iPad touch

最近一直在优化一个网站,为了使其能在移动设备上有更好的用户体验,我们做了许多调整,包括将所有的Flash和Silverlight控件替换成HTML5,以及添加一些针对触屏的事件等。在下一篇文章中我会介...
  • dyllove98
  • dyllove98
  • 2013年05月27日 20:53
  • 864
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:-webkit-overflow-scrolling: touch
举报原因:
原因补充:

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