话不多说，直接上代码，有些地方需要加自己的逻辑，自己加

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>滚动条测试</title>

<style>
.parent_div {
width: auto;
height: auto
}
.lostfound-text{
width: 200px;
height: 50px;
border: 1px red solid;
}
</style>
</head>
<body>

<div class="parent_div">
<div style="width: 100%;height: 500px;border: black 1px solid;"></div>
<ul id="my_list">
<li class="lostfound-text">This is list item origin.</li>
</ul>
</div>


<script src="js/jquery.min.js"></script>
<script>
$(function(){

var pos = 0;
var LIST_ITEM_SIZE = 2;
//滚动条距底部的距离
var BOTTOM_OFFSET = 0;
createListItems();
$(document).ready(function () {
$(window).scroll(function () {
var $currentWindow = $(window);
//当前窗口的高度
var windowHeight = $currentWindow.height();
//当前滚动条从上往下滚动的距离
var scrollTop = $currentWindow.scrollTop();
//当前文档的高度
var docHeight = $(document).height();
//当 滚动条距底部的距离 + 滚动条滚动的距离 >= 文档的高度 - 窗口的高度
//换句话说：（滚动条滚动的距离 + 窗口的高度 = 文档的高度） 这个是基本的公式
if ((BOTTOM_OFFSET + scrollTop) >= docHeight - windowHeight) {

//这里可以写判断逻辑
createListItems();
}
});
});
function createListItems() {
var mylist = $("#my_list");
for (var i = pos; i < pos + LIST_ITEM_SIZE; ++i) {
let x='<li class="lostfound-text">This is list item origin.</li>';
mylist.append(x);
}
pos += LIST_ITEM_SIZE;
}

})

</script>
</body>
</html>

js滚动加载数据的更多相关文章

  1. h5页面列表滚动加载数据

    h5列表滚动加载数据很常见,以下分享下今天做的案例: 前言 这个效果实现需要知道三个参数 1. scrollTop -- 滚动条距离顶部的高度 2. scrollHeight -- 当前页面的总高度( ...

  2. PHP+InfiniteScroll实现网页无限滚动加载数据实例

    PHP+InfiniteScroll实现网页无限滚动加载数据实例,实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据. 首先我们在页面上先放置10条数据,即第一页,每一项都是p标 ...

  3. js滚动加载小插件

    本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...

  4. vue2.0无限滚动加载数据插件

      做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...

  5. js动态加载数据并合并单元格

    js动态加载数据合并单元格, 代码如下所示,可复制直接运行: <!DOCTYPE HTML> <html lang="en-US"> <head> ...

  6. 关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案

    关于使用Iscroll.js异步加载数据后不能滑动到最底端,拉到最下边又弹回去的问题困扰了我老半天,相信很多朋友都遇到了.我刚好不小心解决了,和大家分享一下.由于各种忙,下边就直接上代码吧. (前提是 ...

  7. jquery ajax 滚动加载数据

    jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...

  8. 基于jquery鼠标或者移动端滚动加载数据

    基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...

  9. Vue无限滚动加载数据

    Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...

  10. infinite-scroll插件无限滚动加载数据的使用

    网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...

随机推荐

  1. 072_关于Dataloader导入Record的创建时间及修改时间并允许owner是Inactive

    1.在User interface 中 启用 Enable "Set Audit Fields upon Record Creation" and "Update Rec ...

  2. class的知识点

    1. 在class类中,定义方法在constructor里面和外面的区别?? 定义在constructor里面是原型方法,定义在外边是实例方法.  里面的原型方法在new的时候会改变this指向 2. ...

  3. Xrdp服务安装配置实现Linux远程桌面访问以及问题处理

    0x00 基础介绍 0x01 安装桌面环境 Ubuntu 系列 0x02 Xrdp 安装使用 How to Install xrdp on Ubuntu ? How to Install xrdp t ...

  4. WOW事件大全（翻译对照）

    魔兽世界(WOW)插件开发事件大全 ACHIEVEMENT_EARNED 取得的成就 ACHIEVEMENT_SEARCH_UPDATED 已更新成就搜索 ACTIONBAR_HIDEGRID 动作条 ...

  5. shell_Day05

    交互输入 read    Python中用input()函数,进行输入: read命令同时可以定义多个变量值:而输入的内容默认以空格为分隔符,将值输入到对应的变量中: 如果默认值过多,最后所有的值都会 ...

  6. PowerShell Regex

    PowerShell默认按每一行遍历去匹配模式 比如"aaa`nbbb"用"a.*b"是匹配不到的 需要用"(?s)a.*b"来匹配 1. ...

  7. ES-增删改查

    写作目的 供想了解ES数据操作的伙伴学习ES的CRUD操作. 测试环境 ES7.8.1 postman 创建索引库 // PUT请求 localhost:9200/test_alert { " ...

  8. @Configuration 配置类打断点后，一启动项目读取到该配置类的话就会进断点

    @Configuration 配置类的话,打断点的时候,一启动项目就会读取配置信息,然后你在@Configuration 配置的类中打断点的话,一启动项目就会读取配置类,然后就会进断点,跟你平常的co ...

  9. [笔记]gdb调试中一个string变量太长，如何将该string变量完全输出在屏幕上？

    来自 https://stackoverflow.com/questions/233328/how-do-i-print-the-full-value-of-a-long-string-in-gdb ...

  10. top usage

    https://www.cnblogs.com/dragonsuc/p/5512797.html