滾輪事件(wheel)與Transform實現圖片上下翻滾

通常在實現一些展示性的網頁的時候，我們會選擇兩種方式：製作基於x軸的輪播插件，或者基於y軸上下翻滾的頁面。前者的實現已經非常廣泛，然而後者也有着非常不錯的效果，而且實現起來更爲簡單。需要使用的僅僅是wheel事件和css3的transform的結合。

首先，在較新版本的瀏覽器中，鼠標滾動事件已經被規整到WheelEvent中，爲了保持兼容性，建議對以前的DOMMouseScroll和MouseWheel事件也進行相同的監聽。
實現的原理是，利用WheelEvent中的deltaY屬性，獲取用戶是向上翻滾還是向下翻滾（向上爲負數，向下爲正數）。
先將除第一個以外的element的transform屬性設置爲translateY(100%)。如果爲向下，對當前element修改屬性

transform: translateY(-100%);

將當前的element向上翻滾。同時，對下一個element修改屬性

transform: translateY(0);

即可實現翻滾。在此之間可以添加一些動態效果，比如transition，使得效果更爲平滑。這裏給出一個例子（默認每個圖片的id爲索引）

let arr = new Array(5);
let currentTarget = 0;
document.addEventListener('wheel', (event) => {
  if (event.deltaY > 0) {
    currentTarget = currentTarget === arr.length - 1 ?
      arr.length - 1 : currentTarget + 1;
    document.getElementById((currentTarget - 1).toString())
      .style.transform = "translateY(-100%)";
    document.getElementById(currentTarget.toString())
      .style.transform = "translateY(0)";
  } else if(event.deltaY < 0) {
  currentTarget = currentTarget === 0 ? 0 : currentTarget - 1;
  document.getElementById((currentTarget + 1).toString())
    .style.transform = "translateY(100%)";
  document.getElementById(currentTarget.toString())
    .style.transform = "translateY(0)";
  }
});