在div容器内滚动时旋转元素

HTML

/* The image i'm trying to rotate */
<img class="portfolio" id="rotatelogo" src="http://jakobnatorp.com/wp-content/uploads/2021/10/cropped-JAKOB-LERCHE-DAA-NATORP.png"/>

/* And a div container with class="elementor" */

css

.portfolio {
  position: fixed;
  width:150px;
  height:150px;
  margin-top:50px;
  margin-bottom:-300px;
  margin-left:50px;
}  

.elementor {
  width: 100vh;
  height: 100vw;
  overflow-x: scroll;
  overflow-y: scroll;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  -ms-overflow-style: none;
}

JS

    var element = document.getElementsByClassName("elementor")[0]
    var elem = document.getElementById("rotatelogo");
element.addEventListener('scroll', function() {
    var value = element.scrollY * 0.25;
    elem.style.transform = `translatex(-50%) translatey(-50%) rotate(${value}deg)`; 
});

编辑：我更改了代码，现在它可以工作了。我将&Scrollly&替换为&ScrollTop&。我的新JS是这样的：

    var element = document.getElementsByClassName("elementor")[0]
    var elem = document.getElementById("rotatelogo");
element.addEventListener('scroll', function() {
    var value = element.scrollTop * 0.25;
    elem.style.transform = `translatex(-50%) translatey(-50%) rotate(${value}deg)`; 
});

推荐答案

如果我理解正确的话，您可以选择要向其添加事件的元素。

类似：

const scrollDiv = document.querySelector(".scrollOnMe");
scrollDiv.addEventListener("wheel", () => {
  console.log("Scrolling !");
})

div {
  height: 30px;
}
.scrollOnMe {
  background-color: green;
}
.foo {
  background-color: red;
}

<div class="scrollOnMe">Scroll on me !</div>
<div class="foo">Don't :(<div>