原生js实现滚动加载更多数据
1、滚动形成的条件
元素必须有固定的高度;
元素的内容必须要溢出(形成滚动条);
监听元素的滚动;
2、滚动小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 100vh;//必须要有高度
overflow-y: auto;//滚动条的设计
}
body {
overflow: hidden;//body会有默认的滚动条,如果不需要的话,可以将其进行隐藏
}
</style>
</head>
<body>
<div class="box">
曾经以为有着大堆大堆的年华搁着无处安放,可那过去了的,终究成了回忆。那些美好时光里的希望便像海上的泡沫般轻轻一碰就破了,碎了。于是我骄傲的抬头,在毒辣的阳光下大步走着。那些快乐啊悲伤啊的日子,被我坚决的抛在脑后!
记得小时候,总爱把手指放进嘴里吮吸,那味道咸咸的,却也甜甜的。被大人看见后,总是强制性的让我把手指拿出来,可自己又不听,结果便哇哇大哭起来。不过这招也还真管用,每次哭时,爸妈总会哄着自己:“乖,别哭,给你吃糖糖了!”自己便会破涕而笑。那时候吃到了糖就感觉自己是全世界最幸福的人了。以为世界就这么简单,哭哭就好了。
渐渐长大了,这个习惯不用大人纠正自己也慢慢改掉了。如果现在还把手指放进嘴里,别人铁定会说你幼稚,说你傻。也许是因为害怕自己也被别人说成那样吧,于是就改掉了,也许也不是改掉的,是被自己淡忘了吧......
进了初中以后才发现生活并不是那样简单。那时刚经历了一些事,便很伤心很委屈的倒在朋友肩头哭了(其实现在想想挺幼稚的),不知道是自己变了还是世界变了?渐渐就开始懂得了虚伪,也学会了隐藏伤痛。于是便不再像从前那样哭了,于是
</div>
<script>
const box = document.querySelector('.box');
/*
元素滚动形成的条件:
1、必须有固定的高度;
2、内容必须要溢出(形成滚动条);
3、监听元素的滚动;
*/
box.onscroll = function() {
const {clientHeight, scrollHeight, scrollTop} = box;
console.log(clientHeight, scrollHeight, scrollTop);//随着滚动,这三者的值随时变化
/*
1、clientHeight:元素的可视高(height + padding);
2、scrollHeight:元素实际内容的高;
3、scrollTop:元素滚动出去的高;
4、元素距离底部的距离:scrollHeight- scrollTop - clientHeight
*/
const distance = scrollHeight- scrollTop - clientHeight;
// 当用户滚动到底部距离不到100px,则发起请求(写你的请求代码)
if(distance <= 100) {
/*
发送请求:
页码需要+1;
在请求的过程中不可以再次发起请求(可以利用一个变量来进行控制);
请求的数据,需要和原来的数据进行拼接;
*/
}
}
</script>
</body>
</html>
3、元素.scrollTop一直为0时,需要注意的问题
观察监听的元素是否有滚动条,只有当监听的元素有滚动条的时候,滚动事件才可能去触发;