前端实战干货:如何判断网页是否已经滚动到浏览器底部了

前端实战干货:如何判断网页是否已经滚动到浏览器底部了_第1张图片

某些需求要求用户滚动到浏览器的底部,重新加载新内容。

今天李老师在这里给大家讲解一下,如何使用jQuery来确定用户是否浏览了页面的底部。

在了解以下知识之前,先介绍几个应用概念。

$(window).height(); //用于获取浏览器显示区域的高度

$(window).width(); //用于获取浏览器显示区域的宽度

$(document.body).height(); //获取页面文档的高度

$(document.body).width(); //获取页面文档的宽度

$(document).scrollTop(); //获取垂直滚动条到顶部的垂直距离

$(document).scrollLeft(); //获取水平滚动条到左边的水平距离

通过上面的知识点,可以知道:网页的高度>=浏览器显示区域的高度+垂直滚动条距离顶部距离。

有了这个结论,它就很容易实现了。下面的代码已经实现,判断用户是否浏览到了网页的底部。

前端实战干货:如何判断网页是否已经滚动到浏览器底部了_第2张图片

如果需要判断用户是否已经浏览到某个元素的话,只需更改页面上方文档的高度,然后将其更改为一个元素,即与页面顶部的距离。例如:

前端实战干货:如何判断网页是否已经滚动到浏览器底部了_第3张图片

在这里读者需要注意,在判断条件下,WH + C是满足大于和这个数的最小整数。

接下来把上面的代码封装为一个插件。

前端实战干货:如何判断网页是否已经滚动到浏览器底部了_第4张图片

然后在引入上面的插件文件后,就可以通过类似于下面的代码调用了。

前端实战干货:如何判断网页是否已经滚动到浏览器底部了_第5张图片

好了今天的内容就讲到这里,还没关注的扫下面的二维码点个关注,每天更新更多教程哦!我们下次再见!

如果想学习更多前端开发教程,欢迎关注公众号【前端研究所】,每天更新更多新内容哦!

前端实战干货:如何判断网页是否已经滚动到浏览器底部了_第6张图片

你可能感兴趣的:(前端实战干货:如何判断网页是否已经滚动到浏览器底部了)