Ok, aquí hay un desafío: estoy buscando rotar un elemento fijo cuando te desplazas hacia arriba y hacia abajo dentro de un <div>, y no cuando te desplazas por toda la página. Entonces, ¿cómo dirijo el desplazamiento dentro de un <div> específico (mi div tiene classname="elementor")?

Mi código hasta ahora se ve así:

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

Editar: cambié el código y ahora funciona. Reemplacé el "scrollY" con "scrollTop". Mi nuevo JS se ve así:

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