`

ios下使用iscroll,当手势滑出屏幕外滚动区域不回弹的bug

 
阅读更多

使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回。

 

页面无法弹回的原因在于:手指划出屏幕后touchend事件无法触发,回弹动画就无法执行。解决办法就是:当手指接近屏幕边缘的时候,手动触发动画方法。

在onScrollMove方法中插入判断代码:

 

 

onScrollMove: function () {
   if((this.y < this.maxScrollY) && (this.pointY < 1)){
    this.scrollTo(0, this.maxScrollY, 400);
    return;
   } else if (this.y > 0 && (this.pointY > window.innerHeight - 1)) {
    this.scrollTo(0, 0, 400);
    return;
   }

   ......
  }

 

分享到:
评论

相关推荐

    iscroll5 滑动 滚动

    5. **刷新和更新iscroll**:当内容发生变化时,需要调用iscroll的`refresh`方法来更新滚动状态;添加或删除元素时,可以使用`update`方法。 6. **销毁iscroll**:在不再使用iscroll时,应调用`destroy`方法释放资源...

    iScroll滑动插件的使用示例

    iScroll是一款广泛应用于Web开发中的JavaScript滚动插件,由Matteo Spinelli开发。它提供了高性能、平滑的滚动效果,适用于触摸设备和鼠标操作的网页。在移动设备上,由于浏览器内置的滚动机制可能存在性能问题,...

    iscroll开发多层滚动嵌套

    在IT行业中,iscroll是一个广泛使用的JavaScript库,用于实现高性能的滚动效果,特别是在移动设备上。iscroll由Matteo Spinelli开发,它提供了一种轻量级且灵活的方式来处理触摸事件,使得开发者可以轻松创建平滑的...

    iscroll分页滚动(加回到顶部)

    iscroll本身并不直接支持这种显示,但可以通过监听滚动事件,计算出当前显示的数据范围,进而推算出当前页数。例如,如果每页显示10条数据,通过`myIScroll.y`获取的滚动位置可以用来确定用户已经滚动过的页面数量。...

    iscroll-4 滚动内容

    iscroll 是一款轻量级的JavaScript库,专为移动设备设计,主要用于解决在iOS、Android等平台上实现流畅的滚动效果的问题。iscroll-4是这个库的一个版本,它提供了一个高效且自定义程度高的解决方案,可以在固定高度...

    【iscroll-master移动web绚丽的滚动条

    iscroll的使用并不复杂,只需引入iscroll.js文件,然后初始化iscroll对象,指定需要滚动的容器元素即可。例如: ```html &lt;!-- 需要滚动的内容 --&gt; var myScroll = new IScroll('#wrapper', { scrollbars: ...

    iScroll 5 移动端 局部滚动插件

    4. **自适应布局**:随着内容动态加载或页面布局变化,iScroll 5可以自动更新滚动区域的大小和内容,保持滚动功能的正常工作。 5. **轮播模式**:iScroll 5具有轮播(carousel)模式,使得内容可以在到达尽头后循环...

    iscroll移动app滚动分页demo

    在移动应用开发中,用户体验是至关重要的,尤其是对于数据量庞大的内容展示,如何优雅地处理滚动和分页问题,既能保证流畅性,又能减少网络请求,iscroll是一个很好的解决方案。本示例“iscroll移动app滚动分页demo...

    最牛x的滚动插件 – jquery的iscroll插件

    4. **灵活配置**:iscroll提供了丰富的配置选项,开发者可以根据项目需求调整滚动区域、滚动速度、惯性滚动、弹性回弹等参数。 5. **事件支持**:iscroll支持多种滚动相关的事件,如`scrollStart`、`scrollEnd`、`...

    iScroll 实例:下拉刷新,滚动翻页

    iScroll 是一个强大的JavaScript库,主要用于处理网页中的滚动效果,特别是在移动端或响应式设计中,它能提供平滑、高性能的滚动体验。在"iScroll 实例:下拉刷新,滚动翻页"这个主题中,我们将深入探讨如何利用...

    iscroll触屏滚动

    在移动Web开发中,由于浏览器的默认滚动行为与用户交互的期望不完全匹配,iscroll应运而生,它提供了一种自定义滚动效果的方式,支持高性能的滚动、平滑滚动、滚动条控制以及多种滚动方向(横向和纵向)。...

    iscroll4

    5. **手势识别**:除了基本的滚动,iscroll4还支持简单的手势识别,如翻页和捏合缩放,增强了交互体验。 6. **内存优化**:iscroll4通过动态加载和卸载视口内的内容,实现了内存的高效管理,避免了在大量数据或大...

    手机端加滚动条iscroll-lite

    另外,由于其轻量级特性,不包含所有`iScroll`的功能,例如滚动条显示、横向滚动和多点触控等。 总结,`iscroll-lite`是一个简单而高效的解决方案,适用于手机端需要平滑滚动效果的场景。正确理解和使用它可以显著...

    滚动分页,iscroll

    在本篇文章中,我们将深入探讨如何使用iscroll插件来实现滚动分页。 iscroll是一款轻量级、高性能的JavaScript库,由Matteo Spinelli开发,主要用于处理触摸滚动和滚动事件。它支持各种设备和浏览器,包括桌面、...

    iscroll5 demo

    4. **滚动容器自适应**:iscroll5能够自动检测内容的大小和位置,适应不同屏幕尺寸和分辨率,确保滚动区域始终正确。 5. **可定制化**:iscroll5允许开发者根据项目需求自定义配置,如设置滚动速度、滚动限制、点击...

    页面滚动分页---iScroll实例:下拉刷新,滚动翻页

    4. **性能优化**:为了保证良好的性能,iScroll支持虚拟滚动,即只渲染可见区域的内容,这样可以减少内存占用和渲染成本。同时,还可以通过调整配置项来优化滚动性能,例如设置`scrollbars`控制滚动条的显示,设置`...

    jQuery上下滑动加载刷新插件iscroll.js

    5. **刷新功能**:在内容发生变化时,iscroll.js提供刷新方法,重新计算布局,保持滚动区域的正确显示。 ### III. 工作原理 iscroll.js通过监听浏览器的scroll事件,结合CSS3 translate3d进行内容的移动,从而实现...

    手机滚动iscroll

    6. **弹性滚动效果**:当用户快速滑动后松手,iscroll会有一个回弹效果,模拟真实的物理滚动感觉。 7. **可定制化**:iscroll提供了丰富的API和配置选项,开发者可以根据项目需求进行定制,实现个性化的滚动效果。 ...

    iScroll下拉刷新上滑加载

    很不幸的是,这种情况下所有的web应用的页面就不能够包含具有position:absolute的头、页尾或者是一个内容可滚动的 中间区域。 然而,Android系统最新修订版已经可以支持这种功能了(尽管支持的力度还不是特别好),...

    iScroll4.2.5下拉刷新滚动翻页

    首先,iScroll是一个轻量级、高性能的JavaScript滚动库,它使得在Web页面上实现类似iOS和Android原生滚动效果成为可能。iScroll 4.2.5版本是一个稳定且广泛使用的版本,提供了丰富的配置选项和事件处理,适用于各种...

Global site tag (gtag.js) - Google Analytics