Jquery实现简单的滚动刷新效果

2016-12-05 20:09:10来源:CSDN作者:yang1464657625人点击

Jquery实现简单的滚动刷新效果:
实际情况使用Ajax获取后台数据更新前端页面即可实现页面滚动刷新效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head runat="server">    <title>滚动刷新效果</title>    <meta charset="utf-8" />    <script type="text/javascript" src="js/jquery-3.1.0.js"></script>    <script type="text/javascript">        $(document).ready(function() {            $(window).scroll(function() {                //$(document).scrollTop() 获取垂直滚动的距离:最小值为0,最大值:文档高度-可视化窗口高度                //$(document).scrollLeft() 这是获取水平滚动条的距离                console.log("垂直滚动条位置:"+$(document).scrollTop()+"--"+$(window).height());                if ($(document).scrollTop() <= 0) {                    console.log("滚动条已经到达顶部为0");                }                /**                 *$(document).height():文档的高度                 *$(window).height():可视域的高度:窗口的大小:根据浏览窗口的大小变化                 *判断底部:文档高度<=滚动条垂直高度+可视窗口的高度                 * */                if ($(document).scrollTop() >= $(document).height() - $(window).height()) {                    console.log("滚动条已经到达底部为" + $(document).scrollTop());                }            });        });    </script></head><body>    <form id="form1" runat="server">    <div style="height: 3000px; background-color: yellow;">    </div>    </form></body></html>

这里写图片描述

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台