当您滚动到页面底部时，我希望我的徽标旋转一整圈。如何？

Question

我当前的代码使我的徽标在滚动时旋转，但它旋转了不止一整圈。如何让它在整个页面滚动过程中只旋转一次？

P.S。显然，页面高度会有所不同； 10000px 仅用于演示目的。另外，我将 window.pageYOffset 除以 10 以稍微降低旋转速度。

var logo = document.getElementById("logo");
window.addEventListener("scroll", function() {
    logo.style.transform = "rotate("+window.pageYOffset/10+"deg)";
});

.main {
    height:10000px;
}

#logo {
    position:fixed;
}

<div class="main">
    <div id="logo">
        <img src="https://files.cargocollective.com/c100310/test.svg" alt>
    </div>
</div>

Answer 1

使用360 * window.pageYOffset / (document.documentElement.scrollHeight - document.documentElement.clientHeight)计算角度

var logo = document.getElementById("logo");
window.addEventListener("scroll", function() {
    logo.style.transform = "rotate("+(360 * window.pageYOffset / (document.documentElement.scrollHeight - document.documentElement.clientHeight))+"deg)";
});

.main {
    height:10000px;
}

#logo {
    position:fixed;
    transition: transform 1s;
}

<div class="main">
    <div id="logo">
        <img src="https://files.cargocollective.com/c100310/test.svg" alt>
    </div>
</div>

当您滚动到页面底部时，我希望我的徽标旋转一整圈。如何？

I would like my logo to make one full rotation as you scroll to the bottom of the page. How?

javascript

scroll

rotation

onscroll