欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery判断滚动到底部或顶部

程序员文章站 2022-07-16 08:02:28
...

【前言】

      最近讲到了jQuery,本文分享下jQuery判断滚动到底部或顶部

 

【主体】

      首先需要知道几个方法

      1、滚动条滚动的距离

      2、页面可见区域的高度

      3、整个HTML页面文档的高度

详解:

(1)滚动条滚动的距离

        $(window).scrollTop()和$(document).scrollTop()具有相同的效果,都为返回滚动条的垂直位置,但是$(window).scrollTop()被所有浏览器支持。所以建议以后用$(window).scrollTop()来获取滚动距离

(2)页面可见区域的高度

        $(window).height()

(3)整个HTML页面文档的高度

        $(document).height()

【案例】

        1、(滚动条距离+页面可见区域高度 = HTML页面文档高度),时刚好滑动到底部。但是出滑屏智能机后,手机页面有一个橡皮筋效果,所以滑动到底部后仍然可以继续往下滑。这时会出现(滚动条距离+页面可见区域高度 > HTML页面文档高度)。所以判断是否到底部的判断条件为

$(window).height() + $(window).scrollTop() >= $(document).height();

        2、判断是否到顶部

              $(window).scrollTop()为滚动条滑动距离,如果为0时表示滚动到了顶部。

$(window).scrollTop() == 0;

 

 

【小结】

(1)$(document)是获取文档对象 ;$(window)是获取窗口对象

(2)滚动事件为scoll(),语法为$(selector).scroll(),当窗口滑动时触发

 

 

 

.

相关标签: jQuery 教学笔录