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

2022-04-18 00:00:00 function wrapper scroll javascript html

好的,这里有一个挑战:我希望当您在<;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>

相关文章