JavaScript 屏幕可视元素

需求描述

日常开发中, 遇到元素特别多的页面, 例如全是图表的页面，如果图表过多，造成页面卡顿。
若只显示在屏幕可视范围内的图，范围外的销毁，可大大提高页面性能。

具体实现

function isOnScreen(element) {
  let on_screen_height = 20; // 偏移量

  let rect = element.getBoundingClientRect();
  let windowHeight = window.innerHeight || document.documentElement.clientHeight;

  let elementHeight = element.offsetHeight;

  let onScreenHeight = on_screen_height > elementHeight ?
                      elementHeight : on_screen_height;

  // 元素在屏幕上方, 如果元素不是从屏幕最上侧开始的，需要减去对应值（rect.top 不是 0）
  let elementBottomToWindowTop = rect.top + elementHeight;
  let bottomBoundingOnScreen = elementBottomToWindowTop >= onScreenHeight;

  // 元素在屏幕下方
  let elementTopToWindowBottom = windowHeight - (rect.bottom - elementHeight);
  let topBoundingOnScreen = elementTopToWindowBottom >= onScreenHeight;

  return bottomBoundingOnScreen && topBoundingOnScreen;
}

for (let i=0; i<=6; i++) {
  let element = document.getElementById(i);
  console.log(isOnScreen(element))
  if (isOnScreen(element)) {
    if () { //没数据
      // 获取对应数据
    }
  } else {
    // 销毁
  }
}

<ul>
  <li id="0"></li>
  <li id="1"></li>
  <li id="2"></li>
  <li id="3"></li>
  <li id="4"></li>
  <li id="5"></li>
  <li id="6"></li>
  ...
</ul>

滚动结束事件

由于原生 JavaScript 没有对应滑动结束事件，需要采取定时模拟

let element = document.getElementById('id');

element.onscroll = () => {
  if (window.scrollTimer) {
    clearTimeout(window.scrollTimer) // 普通写法
    // vue写法，由于vue对setTimeout修改，则需要id,否则无法清除
    clearTimeout(window.scrollTimer._id)
  }
  window.scrollTimer = setTimeout(callback, 300)
}

function callback() {
  // 执行滑动结束后内容
}

// 平滑过渡
element.scrollTo({
  left: 0,
  top: num,
  behavior: 'smooth'
})