jQuery判断滚动到底部或顶部

dengjianbin 2018-08-24

【前言】

      最近讲到了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(),当窗口滑动时触发

.

相关推荐

Web全栈笔记 / 0评论 2020-06-15