当您滚动到页面底部时，我希望徽标旋转一圈怎么样？

如何解决当您滚动到页面底部时，我希望徽标旋转一圈怎么样？

我当前的代码使我的徽标在滚动时旋转，但不止一个完整旋转。如何使其在整个页面滚动中仅旋转一次？

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>

解决方法

使用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>