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

<!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. gitlab 已有代码仓库推送到另外一个gitlab仓库

    创建一个新仓库 git clone ssh://git@gitlab.***************.git cd plt-calcium-report-web touch README.md git ...

  2. 升级grafana

    We recommend everyone to upgrade Grafana often to stay up to date with the latest fixes and enhancem ...

  3. 课程表及事件提醒app-界面原型设计

    前端设计: 暂定为8个主要界面:程序初始界面.主界面(首页).课表界面."我的"界面.登录界面.注册界面.创建事件界面.新建课表界面 设计思路: 项目结构 三个主要界面 首页: 课 ...

  4. [OC] 按照 元素 中的某个属性 来对数组进行排序

    数组需要是 NSMutableArray 类型: //ascending - YES:升序,1,2,3 NO:降序:3,2,1 NSArray *sortDescriptors = [NSArray ...

  5. PhpSpreadsheet导出科学记数转成字符串

    $logistic_code."\t"   加上\t即可转成字符串

  6. springboot+mybatis实现增删改查

    开发工具IDEA 一.创建springboot项目(可以百度或者点击查看) 二.添加依赖pom.xml 1 <?xml version="1.0" encoding=&quo ...

  7. python打包生成exe报错

    如图所示    如果出现的是这个问题可以可以考虑以下方法 首先卸载原先下载的 Pyinstaller pip uninstall pyinstaller 再执行以下代码,去github上下载 pip ...

  8. vue3 门户网站搭建8-字体

    浏览器默认的可选字体比较少,如果没有合适的则需要额外下载并引入. 一般使用 开源字体即可,商用需要花钱~ 将下载好的 ttf 格式字体放入项目下文件夹: 样式文件中增加配置:(main.css) 即可 ...

  9. nvm node 版本管理

    nvm安装与使用 1.nvm是什么 nvm全名node.js version management,顾名思义是一个nodejs的版本管理工具.通过它可以安装和切换不同版本的nodejs.下面列出下载. ...

  10. synchronized与CAS

    参考:java3y<对线面试官> synchronized synchronized是⼀种互斥锁,⼀次只能允许⼀个线程进⼊被锁住的代码块synchronized是Java的⼀个关键字,它能 ...