实现滚动框的懒加载

需求背景

<div id="app">
  <!-- 模拟实现一个select下拉框 -->
  <select id="select" multiple size="5"></select>
</div>

const selectEl = document.querySelector('#select');

let current = 1;
function queryData(current, pageSize = 10) {
  // 模拟后端数据
  const data = [];
  for (let i = (current - 1) * pageSize; i < current * pageSize; i++) {
    const optionData = {
      id: i + 1,
      value: i + 1,
      label: `选项${i + 1}`,
    };
    data.push(optionData);

    // 将选项添加到DOM中
    const selectOptionEl = document.createElement('option');
    selectOptionEl.innerText = optionData.label;
    selectOptionEl.value = optionData.value;
    selectEl.appendChild(selectOptionEl);
  }
}
queryData(current)

功能实现

1. 通过比较子节点高度之和实现

实现方案

1. 获得滚动框的可视高度和滚动高度

2. 获取所有option节点的高度之和

// 滚动框折叠高度 + 可视高度 - 子元素高度之和
(selectEl.scrollTop + selectEl.clientHeight ) - (current * pageSize * optionHeight) >= 0

/**
 * 通过比较子节点之和实现
 */
const optionHeight = selectEl.firstChild.offsetHeight;
selectEl.addEventListener('scroll', function (e) {
  if (
    selectEl.scrollTop +
      selectEl.clientHeight -
      current * pageSize * optionHeight >=
    0
  ) {
    alert('加载下一页');
    queryData(++current, pageSize);
  }
});

缺点

2. 通过计算滚动量实现

实现方案

Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 1

/**
 * 通过计算滚动量实现
 */
selectEl.addEventListener('scroll', function (e) {
  if (Math.abs(selectEl.scrollHeight - selectEl.clientHeight - selectEl.scrollTop) < 1) {
    alert('加载下一页');
    queryData(++current, pageSize);
  }
});

3. 通过计算getBoundingClientRect差值实现

实现方案

/**
 * 通过getBoundingClientRect实现
 */
selectEl.addEventListener('scroll', function (e) {
  const selectElInfo = e.target.getBoundingClientRect();
  const lastOptionInfo = e.target.lastChild.getBoundingClientRect();
  if (lastOptionInfo.bottom - selectElInfo.bottom <= 1) {
    alert('加载下一页');
    current++;
    queryData(current, pageSize);
  }
});

缺点

4. 通过InteSectionObserver实现

实现方案

const selectEl = document.querySelector('#select');

// 监听滚动框最后一项子元素出现在屏幕上
const ob = new IntersectionObserver(([e]) => {
  console.log(e);
  // 监听的元素不管是出现还是消失在屏幕时都会触发此回调函数
	// 因此需要通过isIntersecting属性判断是否是出现在屏幕时触发的
  if (e.isIntersecting) {
    alert('加载下一页');
    current++;
    queryData(current, pageSize);
  }
});

let current = 1;
let pageSize = 10;
let observeElement = null;
function queryData(current, pageSize) {
  // 模拟后端数据
  const data = [];
  for (let i = (current - 1) * pageSize; i < current * pageSize; i++) {
    const optionData = {
      id: i + 1,
      value: i + 1,
      label: `选项${i + 1}`,
    };
    data.push(optionData);

    // 将选项添加到DOM中
    const selectOptionEl = document.createElement('option');
    selectOptionEl.innerText = optionData.label;
    selectOptionEl.value = optionData.value;
    selectEl.appendChild(selectOptionEl);
	
		// 当渲染最后一个子元素时，监听
    if (i === current * pageSize - 1) {
			// 即将加载新的一页，之前的最后一项将不再是最后一项
			// 因此要删除该元素的监听
      if (observeElement) {
        ob.unobserve(observeElement);
      }

      observeElement = selectOptionEl;
			// 监听最后一个子元素
      ob.observe(observeElement);
    }
  }
}

最终效果

优化点

防抖

移出事件处理程序

加载状态