JS实现滚动条触底加载更多
原理
1.通过监听滚动区域DOM的scroll事件, 计算出触底
// 滚动可视区域高度 + 当前滚动位置 === 整个滚动高度
scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight
2.触底后触发列表添加, 列表添加使用createDocumentFragment, 将多次插入的DOM先存入内存, 最后一次填充进去, 提高性能, 也方便后面的MutationObserver监听
3.使用MutationObserver监听列表的DOM添加, 添加完毕后, 隐藏加载中提示
示例
https://codepen.io/klren0312/full/dybgayL
参考资料
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onscroll
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment
https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.hide {
display: none;
}
.scroll {
height: 200px;
width: 300px;
overflow-y: auto;
border: 1px solid #ddd;
}
.loading {
text-align: center;
}
ul {
margin: 0;
padding: 0;
}
li {
padding: 10px;
margin: 10px;
text-align: center;
background: #FFF6F6;
list-style-type: none;
}
</style>
</head>
<body>
<div id="js-scroll" class="scroll">
<ul id="js-list">
<li>000000</li>
<li>000000</li>
<li>000000</li>
<li>000000</li>
<li>000000</li>
</ul>
<div class="loading hide" id="js-loading">加载中...</div>
</div>
<script>
let index = 0 // 列表个数
const listDom = document.getElementById('js-list')
const loadingDom = document.getElementById('js-loading')
/**
* 使用MutationObserver监听列表的 DOM 改变
*/
const config = {
attributes: true,
childList: true,
subtree: true
}
const callback = function(mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
if (index === 5) {
loadingDom.innerText = '加载完毕'
} else {
loadingDom.classList.add('hide')
}
}
}
}
const observer = new MutationObserver(callback)
observer.observe(listDom, config)
/**
* clientHeight 滚动可视区域高度
* scrollTop 当前滚动位置
* scrollHeight 整个滚动高度
*/
const scrollDom = document.getElementById('js-scroll')
scrollDom.onscroll = () => {
if (scrollDom.clientHeight + parseInt(scrollDom.scrollTop) === scrollDom.scrollHeight) {
if (loadingDom.classList.contains('hide') && index <= 5) {
loadingDom.classList.remove('hide')
addList()
}
if (index >= 5) {
observer.disconnect() // 加载完毕停止监听列表 DOM 变化
}
}
}
/**
* 添加列表
*/
function addList () {
const fragment = document.createDocumentFragment()
setTimeout(() => {
++index
for (let i = 0; i < 5; i++) {
const li = document.createElement('li')
li.innerText = new Array(6).fill(index).join('')
fragment.appendChild(li)
}
listDom.appendChild(fragment)
} , 1000)
}
</script>
</body>
</html>
总结
以上所述是小编给大家介绍的JS实现滚动条触底加载更多,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
Angularjs 滚动加载更多数据
下面的例子只是为了简单记录怎么使用angularjs来实现滚动加载数据,具体的还是需要具体看待: Javascript部分的controller app.controller('AnalysizerCtrl', ['$scope', '$timeout', '$window', function ($scope, $timeout, $window) { $scope.showData = false; $scope.isLoadingPIG = false; $scope.isLoadingU
-
js实现加载更多功能实例
项目的一个前端页面展示已购买商品时,要求能下拉加载更多.关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方定义的方法使用,用起来总感觉很不顺心.再加上iscroll.js本身并没有集成加载更多的功能,需要进行自行扩展.想继续使用iscroll.js实现加载更多功能的,上面给的链接可以看看. h5项目里需要实现简单的分页功能,由于是移动端,考虑用『加载更多』会更好,而不是PC端
-
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=
-
js实现滑动到页面底部自动加载更多功能
话不多说,请看代码: //滚动条到页面底部加载更多案例 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度 var scrollHeight = $(document).height(); //当前页面的总高度 var clientHeight = $(this).height(); //当前可视的页面高度 // console.log("top:"+scrollTop+"
-
JS实现滚动条触底加载更多
原理 1.通过监听滚动区域DOM的scroll事件, 计算出触底 // 滚动可视区域高度 + 当前滚动位置 === 整个滚动高度 scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight 2.触底后触发列表添加, 列表添加使用createDocumentFragment, 将多次插入的DOM先存入内存, 最后一次填充进去, 提高性能, 也方便后面的MutationObserver监听 3.使用MutationO
-
微信小程序实现触底加载与下拉刷新的示例代码
目录 触底加载 loader函数思考 loader函数实现 触底加载动画 触底加载的优点 下拉刷新 最后 在最近做小程序的时候有这么一个很常见的需求,加载一个信息列表,要求需要触底加载和下拉刷新,我突然想起来掘金小册界面和这个需求很相似,接下来我给大家介绍一下我的实现方案. 触底加载 步骤如下: 封装一个loader函数 在监听页面加载的时候触发这个loader函数 在监听到触底的时候再次触发这个函数 onLoad: function (options) { this.loadBooks(thi
-
微信小程序实现触底加载
现在来看小程序还没有使用pc端的那种分页格式,现在微信小程序上分页一般使用触底加载来实现分页的,下面就来分享一个触底加载的实现方式. 1.首先要从后端也就是服务器上获取分页的数据,如:每页多少条数据,一共分了多少页,大致内容如下图 既然有了数据,那就要在微信端去获取数据了 2.先不考虑分页,把获取到的数据直接显示到微信端 // pages/test/test.js //引入封装请求路径的模块 const orderApi = require('../../api/order') //设置当前页数
-
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
本文实例讲述了微信小程序实现上拉加载功能.分享给大家供大家参考,具体如下: 开发需求 进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据. 演示 index.wxml <!-- 数据列表 --> <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'> <view class='title'>{{item.title}}</
-
微信小程序实现下拉加载更多商品
本文实例为大家分享了微信小程序下拉加载更多商品的具体代码,供大家参考,具体内容如下 1. source code <view class='goods'> <view class='good' wx:for="{{ goodslist }}" wx:key='index'> <view class='pic'> <image src='{{ item.imgUrl }}'></image> </view> <
-
php+jquery+html实现点击不刷新加载更多的实例代码
基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录并以JSON的形式返回给前台页面,前台页面jQuery解析JSON数据,并将数据追加到列表页.其实就是Ajax分页效果. HTML 首先要引入jquery库和jquery.more.js插件,jquery.more.js已经将许多功能都封装好了,并提供了参
-
原生js实现下拉刷新和上拉加载更多
本文实例为大家分享了js实现下拉刷新和上拉加载更多的具体代码,供大家参考,具体内容如下 1.下拉刷新 由于原生js太久不用了,这里列一下此处涉及到的前置知识点: 移动端触屏事件: touchstart(手指按下的一瞬间),touchmove(手指在屏幕上移动时),touchend(手指松开时) 手指在页面上的坐标: pageX,pageY 写之前首先要懂原理,下拉刷新的本质就是用户在页面顶部进行上拉动作时拉到一定的距离触发数据刷新. 大概需要做的几个点: 1.在手指按下时(touchstart)
-
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据 都可以 别忘了引用jquery类库 $(window).scroll(functi