前言
近期比较忙，有几个大项目，一直忙到昏天暗地，都没时间更新博客，今天终于有时间啦，上正题，今天我们来聊一聊JS的滚动加载。在日常需求中，无数次的会遇到滚动加载的相关需求。
今天，我们呢用原生JS实现滚动加载，我相信原生JS都能实现，使用vue、react等前端框架实现那更不是问题，话不多说，先大致描述一下我们要实现的功能（描述需求，一个好的产品经理是多么的重要）：有一堆要展示的内容，但是我们不一次性展示出来，初始先展示一屏幕高度的内容，当滚动到页面底部时，这个时候一般是去请求接口拿数据，进而展示出来，但是今天，我们就不请求接口了，我们用添加dom元素来替代之。
先摆出页面的静态结构如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <style>
* {
margin: 0;
padding: 0;
}
#app {
height: 500px;
overflow-y: scroll;
}
ul {
list-style: none;
}
li {
background-color: yellowgreen;
margin-top: 2px;
}
li:hover {
background-color: deeppink;
}
.blank {
height: 1px;
}
.lazy {
text-align: center;
display: none;
background-color: deepskyblue;
}
</style>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <div id="app">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
</ul>
<p class="blank"></p>
<p class="lazy">懒加载中...</p>
</div>
|
好了，需求描述完毕，下面开始分析：如何知道页面是否已经滚动到底部？这是这个需求的核心部分。
一、第一种方式
有的同学会想到监听scroll事件，然后判断有滚动内容的元素的scrollTop值加上此元素的高度值（clientHeight），然后拿这个计算出来的值与此元素的scrollHeight值进行比较，一般取差值，看是否在某个误差范围内（这个范围一般来说是很小的值），若在范围内，则取请求接口，拿数据，进而展示。
上述这是一般的实现方式，那么，我们来以第一种思路来实现一下：
scrollTop、scrollHeight与clientHeight的重要关系：
关系公式：element.scrollHeight - element.scrollTop === element.clientHeight
解释：此公式可以用于判断是否滚动到底。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| <script>
const app = document.querySelector('#app');
const ul = app.querySelector('ul');
const blank = app.querySelector('.blank');
const lazyDom = app.querySelector('.lazy');
const NUM = 10;
function createDom() {
const fragment = document.createDocumentFragment();
console.log(fragment, 99);
const maxNum = +ul.querySelector('li:last-of-type').innerText;
console.log(maxNum + NUM, 777);
for (let index = maxNum; index < maxNum + NUM;) {
const dom = document.createElement('li');
dom.innerText = ++index;
fragment.appendChild(dom);
}
ul.appendChild(fragment);
}
function debounce(fn, delay = 200, context = null) {
let timer = null;
return function() {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(context);
}, delay);
}
}
function fn() {
if(Math.abs(app.scrollTop + app.clientHeight - app.scrollHeight) <= 20) {
lazyDom.style.display = 'block';
setTimeout(() => {
createDom();
}, 500);
}
if (this.scrollTop == 0) {
lazyDom.style.display = 'none';
}
}
app.addEventListener('scroll', debounce(fn, 500));
</script>
|
二、第二种方式
第二种方式是监听底部元素
是否进入视口，由于此元素在最底部，而且高度设置了1px，所以基本不影响布局，若此元素进入视口，则说明已经滚动到了最底部。OK，来看代码：
1
2
3
4
5
6
7
8
9
10
11
12
| const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
lazyDom.style.display = 'block';
setTimeout(() => {
createDom();
}, 500);
} else {
lazyDom.style.display = 'none';
}
})
observer.observe(blank);
|
那么接下来，请允许我简单的介绍一下一个非常重要的API：IntersectionObserver。
IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。
当一个IntersectionObserver对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦IntersectionObserver被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。
上述是MDN官方的解释说明。我们通俗一点来讲，其实此API就是可以判断被监听的元素是否出现或者消失在视口，通过isIntersecting属性的值（true、false）来判断是否在视口。当被监听的元素由在视口不可见变成在视口可见的那一瞬间，此属性由false变为true；当被监听的元素由在视口可见变成在视口不可见的那一瞬间，此属性由true变为false。
要注意的是，只有当被监听的元素出现或消失在视口的那一瞬间，回调函数才会执行。若被监听的元素一直在视口种，则回调函数不会执行，同理，一直消失的话回调函数也不会执行。
以上两种方式就是实现滚动加载的方案，个人比较倾向于第二种，比较简单，代码量也较少，而且性能开销也不大。
本文纯属个人观点，若有不正确之处，望大家不吝赐教。
微信
支付宝
