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

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

项目背景

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

遇到问题

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

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

单纯判断滚动条方向

0 ? "down" : "up" ); beforeScrollTop = afterScrollTop; },false); }

调用方法

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

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="https://www.jb51.cc/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);
}

调用方法

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

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

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

  }

}

调用方法

判断div是否滚动到底部

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

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

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

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

PS:jQuery滚动条位置控制:

将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()
  });?

原文链接:https://www.f2er.com/jquery/48304.html

猜你在找的jQuery相关文章