使用jQuery判断浏览器滚动条位置的方法

前端之家收集整理的这篇文章主要介绍了使用jQuery判断浏览器滚动条位置的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_3010@

项目背景


@H
301_0@webtouch(webapp)页面,防苹果手机safari浏览器,网上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。


@H_3010@

遇到问题


@H
301_0@1、我一开始用swipeup和swipedown来做,发现因为有滚动条,不会触发。因此只能判断滚动条是上滚下滚等。关于手机手势,后面的文章会介绍,欢迎关注!


@H_301_0@2、通过上滚下滚来让底部导航显示或者因此,安卓上面的浏览器都可以,但是苹果safari会一闪一闪,原因是苹果safari自动有个弹跳效果,导致事件重复执行,解决办法是给上滚下滚一个距离,滚动到一定距离后返回是上滚还是下滚。


@H_301_0@

单纯判断滚动条方向


<div class="jb51code">
<pre class="brush:js;">
function scroll( fn ) {
var beforeScrollTop = document.body.scrollTop,fn = fn || function() {};
window.addEventListener("scroll",function() {
var afterScrollTop = document.body.scrollTop,delta = afterScrollTop - beforeScrollTop;
if( delta === 0 ) return false;
fn( delta > 0 ? "down" : "up" );
beforeScrollTop = afterScrollTop;
},false);
}

@H_301_0@调用方法

@H_301_0@以上方法手机苹果浏览器事件会跳动,解决方法代码改进

var afterScrollTop = document.body.scrollTop; delta = afterScrollTop - beforeScrollTop; beforeScrollTop = afterScrollTop; var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if (scrollTop + windowHeight > scrollHeight - 10) { //滚动到<a href="/tag/dibu/" target="_blank" class="keywords">底部</a>执行事件 fn('up'); return; } if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) { fn('up'); } else { if (Math.abs(delta) < 10) { return false; } fn(delta > 0 ? "down" : "up"); }

},false);
}

@H_301_0@调用方法

@H_301_0@

滚动条滚动到底部和头部判断

@H_301_0@其实我上面的函数中已经有判断,下面再列一下!看如下函数

底部执行事件 console.dir("我到底部了");
  }
  if (scrollTop == 0) { //滚动到头部部执行事件
  console.dir("我到头部了");

  }

}

@H_301_0@调用方法

@H_301_0@

判断div是否滚动到底部

@H_301_0@上面的方法是判断滚动轴是否滚动到底部,但是有时候,我们在做滚动加载的时候,有时候也要做某个div是否滚动到底部然后加载。那么如何判断DIV的滚动轴滚动到底部呢?

@H_301_0@这个也需要了解几个高度:

@H_301_0@1、div的高度 $("#某div").height(); 2、滚动轴的高度 $(#某div)[0].scrollHeight 3、滚动轴到div顶部的高度 $(某div)[0].scrollTop; 书写代码如下:

= nScrollHight) alert("滚动条到底部了"); }); });
@H_301_0@

PS:jQuery滚动条位置控制:

@H_301_0@将div的滚动条滚动到其子元素所在的位置,方便自动定位。

  container.scrollTop(
  scrollTo.offset().top - container.offset().top + container.scrollTop()
  );

  // Or you can animate the scrolling:
  container.animate({
  scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
  });?

猜你在找的jQuery相关文章