使用JavaScript滚动滚动元素

When I recoded and rebranded this site four months ago, I decided to make it completely free of frameworks: while the text and visible code samples for JQuery articles often remained unchanged, under the hood everything had to run vanilla JavaScript.

当我四个月前对该网站进行重新编码和重新命名时 ，我决定使其完全脱离框架 ：尽管JQuery文章的文本和可见代码示例经常保持不变，但实际上所有内容都必须运行原始JavaScript 。

One of those articles explored how to rotate elements on the page with scroll. This article presents an updated version using the code that actually runs underneath that demo, written in vanilla JavaScript… in many respects, an approach that is simpler and more efficient.

其中一篇文章探讨了如何使用滚动旋转页面上的元素 。 本文使用在原始演示下实际运行的代码(使用香草JavaScript编写)提供了一个更新版本，从许多方面来说，这是一种更简单，更有效的方法。

设置齿轮 (Setting The Gears)

As with the previous example, the gears are placed on the page using separate id values. Since they are vector shapes, it makes sense to build and reference the gears as SVG images:

与前面的示例一样，齿轮使用单独的id值放置在页面上。 由于它们是矢量形状，因此有必要将齿轮构建和引用为SVG图像 ：

<div id="gearbox">
    <img src="gear.svg" alt id="leftgear">
    <img src="gear.svg" alt id="rightgear">
</div>

There are many possibilities for positioning the gears: very often they will have a fixed position on the page; it’s also possible to use the new CSS “scroll-to-top-then-fixed” positioning (aka position: sticky). In this example, I’ve used flexbox to separate the elements, and vw units to size them; otherwise, the gears use standard static positioning, and therefore completely scroll with the page.

放置齿轮的方法有很多：许多情况下，它们在页面上会fixed放置； 也可以使用新CSS“从上到下固定滚动”定位(又名position: sticky )。 在此示例中，我使用了flexbox来分隔元素，并使用vw单位来调整它们的大小； 否则，齿轮会使用标准的static定位 ，因此会完全滚动页面。

#gearbox {
    display: flex;
    justify-content: space-between;
}
#leftgear, #rightgear {
    width: 20vw;
    max-width: 20%;
    height: auto;
}

旋转齿轮 (Rotating the Gears)

Rotating the elements themselves is quite straightforward: at the bottom of the page, add the following script.

旋转元素本身非常简单：在页面底部，添加以下脚本。

var leftgear = document.getElementById("leftgear"),
rightgear = document.getElementById("rightgear");
    
window.addEventListener("scroll", function() {
    leftgear.style.transform = "rotate("+window.pageYOffset+"deg)";
    rightgear.style.transform = "rotate(-"+window.pageYOffset+"deg)";
});

Each gear rotates by the amount the window is scrolled in pixels, converted into degrees, the left gear rotating clockwise, and the right counter-clockwise. To speed up or slow down the rotation relative to the amount of scrolling, you could make window.pageYOffset part of a simple mathematical expression: multiplying or dividing it by 2, for example.

每个齿轮旋转窗口以像素为单位滚动的量，转换为度，左齿轮顺时针旋转，右齿轮逆时针旋转。 要相对于滚动量加快或减慢旋转速度，可以使window.pageYOffset成为简单数学表达式的一部分 ：例如，将其乘以或除以2。

避免磨齿轮 (Avoid Grinding Your Gears)

A common issue with any technique that manipulates scroll behaviour is “janking”: elements stuttering as they try to match user input with the browser’s repaint cycle. The easiest way to deal with this is to only move the elements when the browser is prepared to do so, via requestAnimationFrame. To do so, the addEventListener changes to listen for a custom event:

任何操纵滚动行为的技术都存在一个普遍的问题，就是“摇晃”：元素在试图使用户输入与浏览器的重绘周期相匹配时出现卡顿现象。 处理此问题的最简单方法是仅在准备好浏览器的情况下通过requestAnimationFrame移动元素。 为此， addEventListener更改为侦听自定义事件：

window.addEventListener("optimizedScroll", function() {
    …
})

Above the event handler, add an anonymous function:

在事件处理程序上方，添加一个匿名函数：

;(function() {
    var throttle = function(type, name, obj) {
        var obj = obj || window;
        var running = false;
        var func = function() {
            if (running) { return; }
            running = true;
            requestAnimationFrame(function() {
                obj.dispatchEvent(new CustomEvent(name));
                running = false;
            });
        };
        obj.addEventListener(type, func);
    };
    throttle ("scroll", "optimizedScroll");
})();

I’ll have much more to say about requestAnimationFrame in coming articles.

在接下来的文章中，我将对requestAnimationFrame进行更多说明。

翻译自: https://thenewcode.com/279/Rotate-Elements-on-Scroll-with-JavaScript