一、scroll事件允许对页面或元素滚动作出反应。
二、使用场景
1、根据用户在文档中的位置显示/隐藏其他控件或信息。
2、当用户向下滚动到页面末端时加载更多数据。
【示例1】显示当前滚动

  1. window.addEventListener('scroll', function() {
  2.     document.getElementbyId('showScroll').innerHTML = window.pageYOffeset + 'px';
  3. })

三、scroll事件在window和可滚动元素上都可以运行。

防止滚动

一、使某些东西不可滚动
1、方案1：onscroll监听器中使用event.preventDefault()来阻止滚动
结论：不可行
原因：它在滚动发生之后才触发。
2、方案2：在导致滚动的事件上（如pageUp, pageDown的keydown事件上），使用event.preventDefault()来阻止滚动。
结论：可行。
原因：如果我们向这些事件中添加事件处理程序，并向其中添加event.preventDefault()，那么滚动就不会开始。
二、启动滚动
1、使用CSS的overflow属性

示例

无限的页面

一、滚动的两个重要特性
1、滚动时“弹性”的。
（1）在某些浏览器/设备中，我们可以在文档的顶端或末端稍微多滚动出一点（超出部分显示的是空白区域，然后文档将自动“弹回”到正常状态）。
2、滚动并不精确。
（1）当我们滚动到页面末端时，实际上我们可能距真是的文档末端约0-50px
二、“滚动到末端”应该意味着访问者离文档末端的距离不超过100px
【示例1】创建一个无限的滚动页面。当访问者滚动到页面末端时，它会自动将日期时间附加到文本中（以便访问者可以滚动更多内容）。

function populate() {
  while(true) {
    // 文档末端
    let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom; // 获取整个文档相对于窗口的坐标

    // 如果用户将页面滚动的距离不够远（文档末端距窗口底部 >100px）
    if (windowRelativeBottom > document.documentElement.clientHeight + 100) break;

    // 让我们添加更多数据
    document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
  }
}

Up/ down按钮

一、创建一个“到顶部”按钮来帮助页面滚动
二、运行：
1、页面向下滚动的距离没有超过窗口高度时：按钮不可见。
2、当页面向下滚动距离超过窗口高度时：在左上角出现一个“向上”的箭头。如果页面滚动回去，箭头就消失。
3、单击箭头时，页面将滚动到顶部。
三、示意图
image.png
四、示例代码

<!DOCTYPE HTML>
<html>
<head>
  <style>
    body,
    html {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }
    #matrix {
      width: 400px;
      margin: auto;
      overflow: auto;
      text-align: justify;
    }
    #arrowTop {
      height: 9px;
      width: 14px;
      color: green;
      position: fixed;
      top: 10px;
      left: 10px;
      cursor: pointer;
    }
    #arrowTop::before {
      content: '▲';
    }
  </style>
  <meta charset="utf-8">
</head>
<body>
  <div id="matrix">
    <script>
      for (let i = 0; i < 2000; i++) document.writeln(i)
    </script>
  </div>
  <div id="arrowTop" hidden></div>
  <script>
    arrowTop.onclick = function() {
      window.scrollTo(pageXOffset, 0);
      // after scrollTo, there will be a "scroll" event, so the arrow will hide automatically
    };
    window.addEventListener('scroll', function() {
      arrowTop.hidden = (pageYOffset < document.documentElement.clientHeight);
    });
  </script>
</body>
</html>

加载可视化图像

一、场景：假设有一个速度较慢的客户端，并且希望节省它们在移动端的流量
二、方案：不立即显示图像，而是将其替换为转为占位符

<img src="placeholder.svg" width="128" height="128" data-src="real.jpg">

1、最初所有图像均为placeholder.svg。当页面滚动到用户可以看到图像位置时，我们就会将src更改为data-src的src，从而加载图像。
三、要求
1、加载页面时，屏幕上的那些图像应该在滚动之前立即加载。
2、有些图像可能是常规图像，没有data-src。代码不应该改动它们。
3、一旦图像被加载，它就不应该在滚动进/出时被重新加载。
四、示例代码

function isVisible(elem) {
  let coords = elem.getBoundingClientRect();
  let windowHeight = document.documentElement.clientHeight;
  // 顶部元素边缘可见吗？
  let topVisible = coords.top > 0 && coords.top < windowHeight;
  // 底部元素边缘可见吗？
  let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;

  return topVisible || bottomVisible;
}

function showVisible() {
  for (let img of document.querySelectorAll('img')) {
    let realSrc = img.dataset.src;
    if (!realSrc) continue;
    if (isVisible(img)) {
      img.src = realSrc;
      img.dataset.src = '';
    }
  }
}

showVisible();
window.onscroll = showVisible;