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

<!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. 激光雷达ldlidar communication is abnormal.

    查看串口设置是否正常,可以通过cat /dev/ttyS4查看是否有数据以确定所接的串口是否正确

  2. Telerik GridView ----Pdf

    ExportToPDF exporter = new ExportToPDF(this.radGridView1); exporter.FileExtension = "pdf"; ...

  3. JAVA JAR包注册成服务，开机启动，WINSW使用

    1,下载工具 WINSW. https://www.aliyundrive.com/s/fACj3xk8R74 点击链接保存,或者复制本段内容,打开「阿里云盘」APP ,无需下载极速在线查看,视频原画 ...

  4. 【QT】创建动态链接库及使用

    创建动态链接库 创建一个项目 选择library的C++库,下一步. 选择共享库,输入动态库的名字,选择创建路径,下一步 选择编译环境,下一步 选择QTCore模块,该模块提供核心的非图形用户接口功能 ...

  5. .NET Core读写InfluxDB时序数据库的方法教程

    前言 在我们很多应用中会遇到有一种基于一系列时间的数据需要处理,通过时间的顺序可以将这些数据点连成线,再通过数据统计后可以做成多纬度的报表,也可通过机器学习来实现数据的预测告警.而时序数据库就是用于存 ...

  6. pr导出mp4格式提示无法播放解决方案

    pr导出mp4格式提示无法播放解决方案  1.这里的mp4格式就是导出的H.264格式 2. 这里选择导出,默认选项,导出视频有时候出现无法播放现象  3.另外,在视频右击的详细信息中没有任何数据   ...

  7. Nginx教程由浅入深

    Nginx   一.安装Nginx 1.准备工作 (1)打开虚拟机,使用远程连接工具连接 linux 操作系统 (2)到 nginx 官网下载软件 http://nginx.org/ 2.开始进行 n ...

  8. 在idea中查看jar包源码

    文章目录 准备jar包 idea打开文件夹 最后一步 准备jar包 例如,我准备看resin的jar,在桌面准备了一份 idea打开文件夹 在idea中file====>open=====> ...

  9. 本地开发环境使用redis

    1.使用cmd 连接后,查询结果出现乱码时, 尝试连接时加--raw 参数 2.如果还是乱码,设置cmd 窗口编码 chcp 65001 就是换成UTF-8代码页chcp 936 可以换回默认的GBK ...

  10. Qt中跨进程Socket通信以及socket跨线程通信

    一 QTcpServer 创建流程 创建套接字服务器 QTcpServer 对象, 通过 QTcpServer 对象设置监听,即:QTcpServer::listen() 基于 QTcpServer: ...