在div容器内滚动时旋转元素 [英] rotate element on scroll within a div container

问题描述

好的，这里有一个挑战：我希望当您在<；div&>内部上下滚动时旋转固定元素-而当您在整个页面上滚动时不旋转。那么，我如何在特定的<；div>；(我的div具有classname="；elementor"；)中定位滚动？

到目前为止，我的代码如下所示：

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

推荐答案

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

类似：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

这篇关于在div容器内滚动时旋转元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！