如何在滚动class为elementor的div时旋转固定定位元素

API 探路者

2026-9-30

实现div内部滚动触发固定元素旋转的方案

问题核心原因

scrollY 是 window全局对象 的专属属性，仅能获取整个浏览器页面的滚动距离，普通DOM元素不存在该属性，因此初始代码无法正确读取elementor容器的滚动偏移量
DOM元素的内部垂直滚动距离需要使用scrollTop属性获取，你后续的修改逻辑完全正确

完整可运行代码

HTML代码

<!-- 待旋转的固定定位图片 -->
<img class="portfolio" id="rotatelogo" src="http://jakobnatorp.com/wp-content/uploads/2021/10/cropped-JAKOB-LERCHE-DAA-NATORP.png"/>
<!-- 滚动触发容器 -->
<div class="elementor">
  <!-- 此处放置容器内部需要滚动的内容 -->
</div>

CSS代码

.portfolio {
  position: fixed;
  width: 150px;
  height: 150px;
  margin-top: 50px;
  margin-bottom: -300px;
  margin-left: 50px;
  /* 可选：固定旋转中心点，避免旋转时出现位置偏移 */
  transform-origin: center;
}  

.elementor {
  width: 100vh;
  height: 100vw;
  overflow-x: scroll;
  overflow-y: scroll;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  -ms-overflow-style: none;
}
/* 可选：适配webkit内核浏览器隐藏滚动条 */
.elementor::-webkit-scrollbar {
  display: none;
}

最终JS代码

// 获取滚动容器和待旋转元素
const element = document.querySelector('.elementor');
const rotateLogo = document.getElementById('rotatelogo');

// 监听容器滚动事件
element.addEventListener('scroll', () => {
  // 滚动距离乘以系数可控制旋转速度，数值越大旋转越快
  const rotateDeg = element.scrollTop * 0.25;
  rotateLogo.style.transform = `translateX(-50%) translateY(-50%) rotate(${rotateDeg}deg)`;
});