js 根据滚动条加载数据
2024-08-23 05:06:45
很久没记笔记了,最近搞起web开发了
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function insertcode() {
var $body = $("body");
$body.append('<div style=\" height:1000px; font-size:24px;\">新增项目</div>')
$("#page_tag_load").hide();
}
$(document).ready(function () {
$(window).scroll(function () {
var $body = $("body");
var $html = "";
$html += "<br/>" + ($(window).height() + $(window).scrollTop());
$html += "<br/>window.height: " + $(window).height();
$html += "<br/>body.height: " + $body.height();
$html += "<br/>window.scrollTop: " + $(window).scrollTop();
$("#page_tag_bottom").html($html);
/*判断窗体高度与竖向滚动位移大小相加 是否 超过内容页高度*/
if (($(window).height() + $(window).scrollTop()) >= $body.height()) {
$("#page_tag_load").show();
//setTimeout(insertcode, 1000);/*IE 不支持*/
insertcode();
}
});
});
</script>
</head>
<body>
<div style=" height:1000px; font-size:24px;">新增项目</div>
<div id="page_tag_bottom" style=" width:100%; position:fixed; top:0px; background-color:#cccccc;height:100px;"></div>
<div id="page_tag_load" style=" display:none; font-size:14px;position:fixed; bottom:0px; background-color:#cccccc;height:50px;">加载中...</div>
</body>
</html>
以上代码根据滚动条位置触发一个insertcode(),函数,这个函数可以用ajax,获取服务器接口数据,然后重绘dom
最新文章
- PHP数组操作
- ORACLE服务端详细安装步骤(配图解)
- 剑指offer系列31-----二叉树的下一个节点
- python实现的json数据以HTTP GET,POST,PUT,DELETE方式页面请求
- Java实现邮箱找回密码 --转载
- C++程序设计教程学习(0)-引子
- Apache启用GZIP压缩网页传输方法
- Palindromes&;nbsp;_easy&;nbsp;version
- 1599: [Usaco2008 Oct]笨重的石子
- EasyUI combobox下拉多选框的实现
- Nginx 安装详细(一)
- makefile:n: *** missing separator. Stop
- JavaScript有这几种测试
- @Scope 注解
- BAT脚本加防火墙455端口
- 菜单项onCreateOptionsMenu()和onOptionsItemSelected()的使用
- sprint1_11.15燃尽图(第二天)
- LeetCode-Sort List[AC源码]
- Nginx基础笔记
- Alpha阶段项目复审(菜就完事了队)