AutoPager的简单实现

最新推荐文章于 2024-03-06 18:39:39 发布

蒋宇捷

最新推荐文章于 2024-03-06 18:39:39 发布

阅读量1.2w

点赞数

分类专栏：前端 Web前端-关注HTML5与CSS3 文章标签： function xhtml firefox html 腾讯 ajax

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/hfahe/article/details/5827483

版权

Firefox有个自动翻页的插件AutoPager，使用起来非常的方便。腾讯微博也有相同的功能，当鼠标滑动到底部时会自动展开下一页，如下图所示：

展开后如下所示：

这个功能虽然比较小，但是实现起来是非常有意思的事情，我们可以选择多种方法达到目的。下面我介绍一种简单的实现方式。

1、首先移动滚动条会触发window.onscroll事件。

2、我们可以根据滚动条滚动时屏幕位置和页面底部的距离来判断是否需要翻页。

需要用到三个函数：

1、pageHeight：页面总高度。

2、windowHeight：屏幕高度。

3、ScollY：页面滚动的高度。

pageHeight减去windowHeight减去ScollY即为当前屏幕底部到页面底部的距离，如下图所示：

下面我们可以来实现这个功能了，我们设置一个阈值来设定页面加载的次数。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

最低0.47元/天解锁文章

关注

0
点赞
踩
24

收藏

觉得还不错? 一键收藏
4
评论
AutoPager的简单实现

<br />Firefox有个自动翻页的插件AutoPager，使用起来非常的方便。腾讯微博也有相同的功能，当鼠标滑动到底部时会自动展开下一页，如下图所示：<br /> <br /><br />展开后如下所示：<br /><br />这个功能虽然比较小，但是实现起来是非常有意思的事情，我们可以选择多种方法达到目的。下面我介绍一种简单的实现方式。<br />1、首先移动滚动条会触发window.onscroll事件。<br />2、我们可以根据滚动条滚动时屏幕位置和页面底部的距离来判断是否需要翻页。<br /
复制链接

扫一扫

专栏目录

评论 4

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。