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

项目背景
webtouch（webapp）页面，防苹果手机safari浏览器，网上滑动，底部导航消失，滑动到底部又出现。向下滑动，底部导航出现。
遇到问题
1、我一开始用swipeup和swipedown来做，发现因为有滚动条，不会触发。因此只能判断滚动条是上滚下滚等。关于手机手势，后面的文章会介绍，欢迎关注！
2、通过上滚下滚来让底部导航显示或者因此，安卓上面的浏览器都可以，但是苹果safari会一闪一闪，原因是苹果safari自动有个弹跳效果，导致事件重复执行，解决办法是给上滚下滚一个距离，滚动到一定距离后返回是上滚还是下滚。
单纯判断滚动条方向

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）;}

调用方法：

scroll（function（direction） { console.log（direction） }）;

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

scrollDirect: function （fn） {var beforeScrollTop = document.body.scrollTop;fn = fn || function （） {};window.addEventListener（"scroll", function （event） {event = event || window.event;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） { //滚动到底部执行事件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）;}

调用方法：

var upflag=1;var downflag= 1;//scroll滑动,上滑和下滑只执行一次！scrollDirect（function （direction） {if （direction == "down"） {if （downflag） {$（".footer_wrap"）.slideUp（200）;downflag = 0;upflag = 1;}}if （direction == "up"） {if （upflag） {$（".footer_wrap"）.slideDown（200）;downflag = 1;upflag = 0;}} }）;

滚动条滚动到底部和头部判断
其实我上面的函数中已经有判断，下面再列一下！看如下函数！

BottomJumpPage: function （） {var scrollTop = $（this）.scrollTop（）;var scrollHeight = $（document）.height（）;var windowHeight = $（this）.height（）;if （scrollTop + windowHeight == scrollHeight） { //滚动到底部执行事件console.dir（"我到底部了"）；}if （scrollTop == 0） { //滚动到头部部执行事件console.dir（"我到头部了"）；} }

调用方法：

$（window）.scroll（BottomJumpPage）;

判断div是否滚动到底部
上面的方法是判断滚动轴是否滚动到底部，但是有时候，我们在做滚动加载的时候，有时候也要做某个div是否滚动到底部然后加载。那么如何判断DIV的滚动轴滚动到底部呢？
这个也需要了解几个高度：
1、div的高度 $（"#某div"）.height（）;
2、滚动轴的高度 $（#某div）[0].scrollHeight
3、滚动轴到div顶部的高度 $（某div）[0].scrollTop;
书写代码如下：

 $（document）.ready（function （）{var nScrollHight = 0; //滚动距离总长（注意不是滚动条的长度）var nScrollTop = 0;//滚动到的当前位置var nDivHight = $（"#div1"）.height（）;$（"#div1"）.scroll（function（）{ nScrollHight = $（this）[0].scrollHeight; nScrollTop = $（this）[0].scrollTop; if（nScrollTop + nDivHight >= nScrollHight）alert（"滚动条到底部了"）; }）;}）;

PS:jQuery滚动条位置控制：
将div的滚动条滚动到其子元素所在的位置，方便自动定位。

  var container = $（"div"）,   scrollTo = $（"#row_8"）;  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（）   }）;?