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

<!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. python利用signal自定义函数超时机制

    利用signal模块,可以给函数设置一个超时时间(精确到秒),结合装饰器实现:超时时间内函数运行完成正常退出,超时时间内函数未运行完成则抛出Timeout异常. 1 # coding:utf8 2 i ...

  2. Java-封装结果集示例

    1 @Data 2 public class ResultData implements Serializable { 3 4 /** 5 * 状态码 6 */ 7 private String co ...

  3. 至少有K个重复字符的最长子串

    传送门 /** * 分治 */ class Solution { // dp[i]:表示以i为结尾满足条件的子串的长度 public int longestSubstring(String s, in ...

  4. 才子佳人小说研究.PDF

    书本详情 才子佳人小说研究作者:周建渝著出版社:文史哲出版社时间:1998页数:273ISBN:957549167X ISBN:9789575491673

  5. 哲讯科技SAP医疗器械行业ERP解决方案

    哲讯科技SAP医疗器械行业ERP解决方案主要体现在以预测为指导,计划为执行的管理理念,完全做到实时的全过程的质量管理和质量跟踪.并且通过灵活的质量管理模块大大降低因实施GMP管理给企业带来的成本压力. ...

  6. LightOJ - 1162 Min Max Roads

    LightOJ - 1162 Min Max Roads 题解:在线倍增LCA和模拟ST表 让我们求从\(u->v\)最短路径上的边权最大值和边权最小值,那么我们可以利用倍增思想,类似其\(fa ...

  7. Delphi as 和 is 的使用

    as就是把某个类型对象转换为某个指定类型,这样方便使用指定类型中的一些成员. is就是判断某个对象是不是某个类型,可以筛选出我们需要的对象. 下面是一个as is 的实例代码,该代码同时也实现了两种方 ...

  8. JAVA框架知识

    Java中的MVC: M是指模型层,C则是控制器,V是指视图:一个完整的请求过程是,客户端发送请求到控制器,控制器调用业务层处理请求,并返回处理结果给视图,其中业务层是调用Dao层去完成业务逻辑的:M ...

  9. CH32V00+WS2812制作音乐谱显示

    CH32V003,自带运放.SPI.PWM等外设模块,关键还便宜,便宜,便宜! 可以尝试来实现一个低成本的音乐谱显示. 1. 硬件设计 显示方面,使用64颗ws2812组成8*8的显示阵列,通过 CH ...

  10. windows下BAT实现守护进程

    通过bat守护特定exe @echo off :start choice /t 5 /d y /n >nul tasklist|find /i "程序名称.exe" if E ...