主页 / coding / 问题 / 79180827
Accepted
Meek
Asked: 2024-11-12 19:03:15 +0800 CST

滚动时将元素旋转 x 度

  • 772

我想在滚动时旋转一些元素。我希望它们从 0 度开始旋转，然后在每次向上/向下滚动事件时将当前度数加或减 25 度（或任何其他数字）。

这是我的情况。第一次滚动时可以工作，但向上或向下滚动时值不会更新。我遗漏了什么？

const elem = document.querySelectorAll(".rotator");
window.addEventListener("scroll", function () {
  elem.forEach((el) => {
    let lastScrollTop = 0;
    let value = 0;
    let st = window.pageYOffset || document.documentElement.scrollTop;
    if (st > lastScrollTop) {
      // Scroll down
      value += 25;
    } else if (st < lastScrollTop) {
      // Scroll up
      value -= 25;
    }

    el.style.transform = `rotate(${value}deg)`;
  })
})
.rotator {
  height: 50px;
  width: 50px;
  background-color: lightgreen;

}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 1000px;
}
<h1>Keep rotating on scrolling up or down</h1>
<div class="rotator">Rotate</div>
<div class="rotator">Rotate</div>

javascript

1 个回答

  1. Best Answer

    每次迭代时都要重新设置值0。将声明移到循环之外。

    你也从来没有设置lastScrollTop，所以我添加了一个 lastScrollTop = st;

    let value = 0;
let lastScrollTop = 0;
const elem = document.querySelectorAll(".rotator");

window.addEventListener("scroll", function () {
  elem.forEach((el) => { 
    let st = window.pageYOffset || document.documentElement.scrollTop;
    if (st > lastScrollTop) {
      // Scroll down
      value += 25;
    } else if (st < lastScrollTop) {
      // Scroll up
      value -= 25;
    }
    lastScrollTop = st;
    el.style.transform = `rotate(${value}deg)`;
  })
})
    .rotator {
  height: 50px;
  width: 50px;
  background-color: lightgreen;

}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 1000px;
}
    <h1>Keep rotating on scrolling up or down</h1>
<div class="rotator">Rotate</div>
<div class="rotator">Rotate</div>

    使用滚轮事件的小示例，您可以检查event.deltaY滚动方向并将其附加到值。

    let value = 0;
const elem = document.querySelectorAll(".rotator");

window.addEventListener("wheel", function (ev) {
  elem.forEach((el) =>
    el.style.transform = `rotate(${value += (ev.deltaY < 1) ? 25 : -25}deg)`)
})
    .rotator {height: 50px; width: 50px; background-color: lightgreen; }
body {display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 1000px; }
    <h1>Keep rotating on scrolling up or down</h1>
<div class="rotator">Rotate</div>
<div class="rotator">Rotate</div>

    • 3

相关问题