网站水平滚动激活动画

Question

我知道垂直滚动如何导致动画，但是水平滚动如何导致动画？

Answer 1

同样的，你听滚动事件并观看window.scrollX

var item = document.getElementById("item")
window.addEventListener('scroll', function(e) {
  if (window.scrollX > 100) {
        item.classList.add('active')
  } else {
    item.classList.remove('active')
  }

});

body {
  overflow-x: scroll;
}

#item {
  width: 2000px;
  height: 200px;
  background-color: gold;
  transition: all .25s;
}

#item.active {
  background-color: red;
}

<div id="item"></div>