改变滚动方向时 div 旋转 180 度

Question

我正在制作一个网页，其中的插图在页面中向下移动，当我更改滚动方向时，我希望它旋转 180 度以匹配滚动方向。在互联网上找不到任何可以帮助我编写这行 JS 的东西。我是 js 的新手，想通过实践来学习它。

Answer 1

首先尝试确定滚动方向，然后每当滚动发生变化时：

let direction = null;
let oldScroll = 0;
window.onscroll = function(e) {
  // print "false" if direction is down and "true" if up
 if(this.oldScroll > this.scrollY) {
   if(direction !== "up") {
     document.getElementById("box").style.transform = "rotate(180deg)";
   }
   direction = "up"
 } else {
   if(direction !== 'down'){
     document.getElementById("box").style.transform = "";
   }
   direction = "down";
 }
  this.oldScroll = this.scrollY;
}

.box{
  transition: all 2s;
  height: 50px;
  width: 150px;
  background-color: red;
}
.container{
  height:1000px;
}

<div class="container">
  <div class="box" id="box"></div>
</div>

改变滚动方向时 div 旋转 180 度

Make a div rotate 180 deg when changing scroll direction

javascript

scroll

vertical-scrolling