HTML5技术

IOS 的弹性滚动 - 黎焱

字号+ 作者:H5之家 来源:H5之家 2016-10-26 18:00 我要评论( )

所谓弹性滚动就是指在翻动长页面手指离开时,有由慢到块,由快到慢的过度。 安卓平台上的大多数浏览器都默认了该行为 ios当前还只对body下的 overflow 默认产生弹性滚动效果 前一阵子做了一个手机官网,用到了 div 中的 overflow,再调试 ios 中遇到了弹性滚

  所谓弹性滚动就是指在翻动长页面手指离开时,有由慢到块,由快到慢的过度。

 

  安卓平台上的大多数浏览器都默认了该行为

  ios当前还只对<body>下的 overflow 默认产生弹性滚动效果

 

  

  前一阵子做了一个手机官网,用到了 <div> 中的 overflow,再调试 ios 中遇到了弹性滚动的问题:

  ios 下 webkit 弹性滚动 css 指令 -webkit-overflow-scrolling: touch;

  该指令再切换同样需要做滚动处理的 div 是会遇到一下情况

  1. 伴随着上一个滚动而滚动  

  2. 起始定位偏差  

  3. 粘滞的阻塞感(失去焦点)

 

  解决方案:

  .session{

    -webkit-overflow-scrolling: touch;

  }

  1. 切换标签的同时去掉元素的 overflow-scrolling 属性

  $('.session').removeClass('sollow');

  2. 切换标签同时对目标 div 做初始化

  document.getElementById('target').scrollTop = '0px'; // 根据需要添加

  3. 将sollow重新加载到目标元素上

  $('.session:eq(' + tar + ')').addClass('display sollow');

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 移动端页面滚动穿透问题一些解决方案 - Lyzh

    移动端页面滚动穿透问题一些解决方案 - Lyzh

    2016-08-26 18:00

  • 【前端性能】高性能滚动 scroll 及页面渲染优化 - ChokCoco

    【前端性能】高性能滚动 scroll 及页面渲染优化 - ChokCoco

    2016-05-19 12:00

  • 基于淘宝弹性布局方案lib-flexible的问题研究 - 流云诸葛

    基于淘宝弹性布局方案lib-flexible的问题研究 - 流云诸葛

    2016-01-14 12:58

  • 淘宝弹性布局方案lib-flexible实践 - 流云诸葛

    淘宝弹性布局方案lib-flexible实践 - 流云诸葛

    2015-12-23 08:46

网友点评
r