Ok so here's a challenge: I'm looking to rotate a fixed element when you scroll up and down inside a < div > - and not when you scroll on the entire page. So how do i target the scroll within a specific < div> (my div has classname="elementor")?

My code so far looks like this:

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)`; 
});

Edit: I changed the code and it works now. I replaced the "scrollY" with "scrollTop". My new JS looks like this:

    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)`; 
});