时间戳

首页 > 解决方案 > 在 div 容器中滚动时旋转元素

javascript - 在 div 容器中滚动时旋转元素

问题描述

好的，这是一个挑战：当您在 < 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)`; 
});

编辑：我更改了代码，现在可以使用。我用“scrollTop”替换了“scrollY”。我的新 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)`; 
});

标签： javascripthtmlfunctionscrollwrapper

解决方案

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

就像是 ：

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>

推荐阅读