监听停止滚动

通常,我们希望在滑动结束后,执行一些代码。scrollViewDidEndDecelerating方法在一定程度上可以解决我们的需求。注意是一定程度上。

顾名思义,scrollViewDidEndDecelerating表示减速结束了。然而减速结束和滑动结束并不等价。因为有些滑动并不需要减速也可以结束。比如我两只手轮流向左滑动,直到滑动到scrollview的右侧尽头为止,这个过程的滑动是被迫终止而不是自然减速停止,所以scrollViewDidEndDecelerating方法是不会被执行的。

怎么解决这个bug呢?可以用到另一个方法:scrollViewDidEndDragging: willDecelerate: 
这个方法的含义是拖动结束。也就是用户的手从屏幕上抬起的一刹那,会执行这个方法。

那把之前scrollViewDidEndDecelerating方法里的代码直接复制进这个方法,可以解决问题么?答案是不可以。因为这个方法只能获取到用户的手离开屏幕事件,而这与滑动结束往往还有一段时间的间隔。如果原代码涉及动画相关,用户体验将会非常糟糕。此外,不难得出结论:

scrollViewDidEndDragging一定在scrollViewDidEndDecelerating方法之前被执行,有时候要早得多(自然停止滑动),有时候几乎是同时的(被迫停止滑动)。

扯了这么多废话,正确的解决方案是是什么呢?参加以下代码:

-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    if(!decelerate){
        //这里复制scrollViewDidEndDecelerating里的代码
    }
}

为什么要加一个判断呢,试想一下,什么情况可能出现用户停止滑动(手指离开屏幕)而且恰好不在减速呢?正是本文最初提出的那个反例:因为滑动到了边界而被迫终止滑动。

这恰好与scrollViewDidEndDecelerating方法的不足是互补的!

时间: 2024-07-28 12:44:32

监听停止滚动的相关文章

Android项目:使用pulltorefresh开源项目扩展为下拉刷新上拉加载更多的处理方法,监听listview滚动方向

很多android应用的下拉刷新都是使用的pulltorefresh这个开源项目,但是它的扩展性在下拉刷新同时又上拉加载更多时会有一定的局限性.查了很多地方,发现这个开源项目并不能很好的同时支持下拉刷新和上拉加载更多.这个组件有个mode的属性,可以设置为both,即上下同时都可拉动.但是只设置这个属性的话,上拉与下拉产生的效果是完全一致的.所以要使用这个开源项目做到下拉刷新并同时可上拉加载更多,就需要在代码中进行一些处理. ==========================pulltoref

react 监听页面滚动

html: // 如果使用typescript, 定义dom类型 private dom: HTMLDivElement | null // ReactJS中,对Div监听只需要绑定 onScrollCapture事件 <div style={{ flex: 1, height: '10000px', overflowY: 'scroll', overflowX: 'hidden', }} ref={dom => {this.dom = dom}} onScrollCapture={() =&

监听页面滚动事件

不知大家在前端开发实践中有没有做过这样一个效果,就是页面布局中有一个顶部通栏的搜索登录框,我们的需求就是当鼠标向下滚动时,顶部通栏始终固定在顶部,并且默认顶部是透明背景,而当页面滚动时,顶部通栏的透明度随着页面卷曲的高度增加而变大,当页面滚动距离超过某一个高度时,透明度就固定不变了.顶部通栏的固定很好实现,只需要令其position属性值为fixed即可,顶部通栏的透明度则通过opacity属性来设置.比较容易出错的地方是这里需要监听页面滚动事件,得到实时的页面滚动距离,从而判断其距离的大小作出

监听页面滚动及滚动到指定位置

两种监听页面滚动的方法 一.原生js通过window.onscroll监听window.onscroll = function() {//为了保证兼容性,这里取两个值,哪个有值取哪一个//scrollTop就是触发滚轮事件时滚轮的高度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;console.log("滚动距离" + scrollTop);} 二.Jquery通过$(wind

ionic 监听页面滚动,点击停止滚动

类似今日头条,页面上有很多card,点击每个card跳转该card的详情页面.这里有一个问题,当我滚动页面时,会先后触发touchstart.touchmove.touchend,但是当touchend后,页面仍会因为惯性而继续滚动.这个时候,我想点击页面停止滚动,而不是跳转到某个card的详情页面. 原理很简单:设置一个状态,初始值为true,页面滚动时变为false,页面停止滚动,则恢复为true,只有这个值为true时,才能触发跳转事件,即进入card详情页面. 这里需要用到ionic的一

JQuery监听页面滚动总结

1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offset().top; 3.对页面滚动条滚动的监听:要放在页面加载的时候 $(window).scroll(function(event){ }); 4.设置滚动条到指定位置.$(window).scrollTop(offset).

vue监听滚动事件,实现滚动监听(scroll滚动)

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <script type="text/javascript" src="

导航栏监听页面滚动跟随 简单封装

slide('.wedding-title', '.expo-list', 'change','.nav'); //导航条 参数:导航栏父级, 被监听元素 , 导航改变样式,导航栏 function slide(navfather, tClass, activeClass,nav) { var $navfather = $(navfather), $nav = $(nav); $navfather.css({ "position": 'relative' }); var $navfat

监听鼠标滚动事件,如滚动鼠标出现返回顶部按钮

JQuery方法: $(window).bind('scroll',function(){ // var len = $(this).scrollTop() if($('body').scrollTop() < 10){ $('#DiaLayer').hide(); } else { $('#DiaLayer').show(); }}) 原生代码: // scrollFlag = false时向下滚动出现导航条 var scrollFlag = false; window.onscroll =