网站水平滚动激活动画

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>