夏日博客

A-A+

jquery判断页面滚动条(scroll)的方向

2016年01月11日 前端设计 暂无评论 阅读 8 views 次

在做返回顶部或底部时我们就需要通过判断来显示或隐藏相对应的菜单按钮了，下面我们就来看一些小编整理的判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部的代码。

项目背景:

webtouch（webapp）页面，防苹果手机safari浏览器，网上滑动，底部导航消失，滑动到底部又出现。向下滑动，底部导航出现。

遇到问题:

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

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

单纯判断滚动条方向

  1. function scroll( fn ) {  
  2.     var beforeScrollTop = document.body.scrollTop,  
  3.         fn = fn || function() {};  
  4.     window.addEventListener("scroll", function() {  
  5.         var afterScrollTop = document.body.scrollTop,  
  6.             delta = afterScrollTop - beforeScrollTop;  
  7.         if( delta === 0 ) return false;  
  8.         fn( delta > 0 ? "down" : "up" );  
  9.         beforeScrollTop = afterScrollTop;  
  10.     }, false);  
  11. }  

调用方法:

scroll(function(direction) { console.log(direction) });

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

  1. scrollDirect: function (fn) {  
  2.     var beforeScrollTop = document.body.scrollTop;  
  3.     fn = fn || function () {  
  4.     };  
  5.     window.addEventListener("scroll", function (event) {  
  6.         event = event || window.event;  
  7.         var afterScrollTop = document.body.scrollTop;  
  8.         delta = afterScrollTop - beforeScrollTop;  
  9.         beforeScrollTop = afterScrollTop;  
  10.         var scrollTop = $(this).scrollTop();  
  11.         var scrollHeight = $(document).height();  
  12.         var windowHeight = $(this).height();  
  13.         if (scrollTop + windowHeight > scrollHeight - 10) {  //滚动到底部执行事件  
  14.             fn('up');  
  15.             return;  
  16.         }  
  17.         if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {  
  18.             fn('up');  
  19.         } else {  
  20.             if (Math.abs(delta) < 10) {  
  21.                 return false;  
  22.             }  
  23.             fn(delta > 0 ? "down" : "up");  
  24.         }  
  25.     }, false);  
  26. }  

调用方法:

  1.   var upflag=1;  
  2.   var  downflag= 1;  
  3.    //scroll滑动,上滑和下滑只执行一次！  
  4. crollDirect(function (direction) {  
  5.        if (direction == "down") {  
  6.            if (downflag) {  
  7.                $(".footer_wrap").slideUp(200);  
  8.                downflag = 0;  
  9.               upflag = 1;  
  10.            }  
  11.        }  
  12.        if (direction == "up") {  
  13.            if (upflag) {  
  14.                $(".footer_wrap").slideDown(200);  
  15.               downflag = 1;  
  16.                upflag = 0;  
  17.            }  
  18.        }  
  19. });  

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

  1. BottomJumpPage: function () {  
  2.             var scrollTop = $(this).scrollTop();  
  3.             var scrollHeight = $(document).height();  
  4.             var windowHeight = $(this).height();  
  5.             if (scrollTop + windowHeight == scrollHeight) {  //滚动到底部执行事件  
  6.                     console.dir("我到底部了")；  
  7.             }  
  8.             if (scrollTop == 0) {  //滚动到头部部执行事件  
  9.             console.dir("我到头部了")；  
  10.             }  
  11.  }  

调用方法：

$(window).scroll(BottomJumpPage);

关于是否滚动到页面底部和头部还可以参考下面一些方法

jquery的各种高度

首先来说一说$(document)和$(window)，如下：

$(document).height();//整个网页的高度

$(window).height();//浏览器可视窗口的高度

$(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）

用一句话理解就是：当网页滚动条拉到最低端时，

$(document).height() == $(window).height() + $(window).scrollTop()。

注意，是拉到最低端！

当网页高度不足浏览器窗口时$(document).height()返回的是$(window).height()

假如您要获取整个网页的高度，不建议用$("html").height()、$("body").height()的高度，

原因:

$("body").height()：body可能会有边框，获取的高度会比$(document).height()小； $("html").height()：在不同的浏览器上获取的高度的意义会有差异，说白了就是浏览器不兼容。

说道这里，提及边框和margin还有padding，我们自然想到了jquery的另外的两个高度，那就是innerHeight()和outerHeight()

innerHeight()和outerHeight()不适用于window 和 document对象，对于window 和 document对象可以使用.height()代替。innerHeight()和outerHeight()主要用来获取标签的高度。

innerHeight()

enter image description here

innerHeight:高度＋补白

outerHeight:高度＋补白＋边框，参数为true时：高度＋补白＋边框＋边距

innerHeight(value)

这个“value”参数可以是一个字符串（数字加单位）或者是一个数字,如果这个“value”参数只提供一个数字，jQuery会自动加上像素单位（px）。如果只提供一个字符串，任何有效的CSS尺寸都可以为高度赋值（就像100px, 50%, 或者 auto）。注意在现代浏览器中，CSS高度属性不包含padding, border, 或者 margin， 除非box-sizingCSS属性被应用。

javascript的各种高度

网页可见区域宽:document.body.clientWidth

网页可见区域高:document.body.clientHeight

网页可见区域宽:document.body.offsetWidth (包括边线的宽)

网页可见区域高:document.body.offsetHeight (包括边线的高)

网页正文全文宽:document.body.scrollWidth

网页正文全文高:document.body.scrollHeight

网页被卷去的高:document.body.scrollTop

网页被卷去的左:document.body.scrollLeft

网页正文部分上:window.screenTop

网页正文部分左:window.screenLeft

屏幕分辨率的高:window.screen.height

屏幕分辨率的宽:window.screen.width

屏幕可用工作区高度:window.screen.availHeight

屏幕可用工作区宽度:window.screen.availWidth

结束语

注意，在运用jquery的innerHeight()和outerHeight()的时候，可能会有浏览器的兼容问题，不同浏览器出现不同高度，总之，实践得真知，你可以测试一下，写几个小的demo，总结一下！

标签：

给我留言