更改滚动方向时使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>