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

<!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. Linux网络第五章：yum仓库的灵活部署及NFS共享服务

    目录 一.yum仓库的灵活部署 1.yum基础知识及命令 2.本地yum仓库搭建 3.通过httpd服务建立yum仓库 4.建立国内yum源 二.NFS共享服务 1.NFS基础知识 2.搭建NFS服务 ...

  2. Unity C#for和foreach效率比较

    下面是代码自己测试一下即可 using System.Collections; using System.Collections.Generic; using UnityEngine; public ...

  3. Kubernetes--Pod存活性探测(设置HTTP探针)

    基于HTTP的探测(HTTPGetAction)向目标容器发起一个HTTP请求,根据其响应码进行结果判定,响应码形如2xx或者3xx时表示检测通过."sepc.containers.live ...

  4. Java集合-Set接口

    Set接口-介绍 Set接口的定义如下: Set是一个继承于Collection的接口,即Set也是集合中的一种.Set是没有重复元素的集合.即: Set 接口:无序,不支持索引,不可重复的集合 Se ...

  5. 1.Python3.5+Pyqt5+PyCharm+Opencv3.3+Qtdesigner开发环境配置

    一:Python3.3和Pyqt5的安装 注意:两个的版本一定要对应,一定要对应,一定要对应,重要的事情说三遍. 因为我自己的电脑是64位的,所以我下载的都是64位版本的,且都是3.5版本的:这两个一 ...

  6. springboot gradle 集成流程引擎activiti

    buildscript { repositories { maven { url 'https://maven.aliyun.com/repository/gradle-plugin' } } dep ...

  7. 【服务器数据恢复】raid5硬盘同步数据未完成时关机的数据恢复案例

    服务器数据恢复环境:某公司一台服务器组建了一组raid5磁盘阵列,作为共享存储池使用.该服务器存储数据库文件和普通文件. 服务器故障&检测:RAID5磁盘阵列的硬盘掉线导致服务器操作系统识别不 ...

  8. mysql企业常用集群架构

    转自 https://blog.csdn.net/kingice1014/article/details/76020061 1.mysql企业常用集群架构 在中小型互联网的企业中.mysql的集群一般 ...

  9. uml类间关系总结

    1. 关联关系 (1) 双向关联 顾客购买并拥有商品,商品被顾客购买,Customer和Product双向关联 (2) 单向关联 顾客拥有地址 (3) 自关联:一些类的属性对象类型是本身 (4) 多重 ...

  10. charles小程序抓包

    参考链接:https://www.jianshu.com/p/048b67c5ed00 1. 手机上的程序目前按app的抓包方式,配置代 理,下载证书,打开设备---微信---本地网络,就可以直接抓包 ...