I know that this question was asked some time ago, however, the performance issue still exists.
Below is an alternative solution that does not rely upon a scrolling event listener. This minimises jank and lag caused by the separate scrolling thread common among web browsers, updating the css at regular intervals rather than when the window is scrolled. This means that the dev console warning will not display. I personally wouldn't be too worried about the warning or using scrolling events for small things like turning a gear or changing a css class, however, if the user experience directly relies upon the effect, it will destroy the usability of the page.
var gear;
var lastPosition;
var refreshRate = 60; // fps; reduce for less overhead
var animation = "rotate(*deg)"; // css style to apply [Wildcard is *]
var link = 0.5; //what to multiply the scrollTop by
function replace(){
if(lastPosition != document.body.scrollTop){ // Prevents unnecessary recursion
lastPosition = document.body.scrollTop; // updates the last position to current
gear.style.transform = animation.replace("*", Math.round(lastPosition * link)); // applies new style to the gear
}
}
function setup(){
lastPosition = document.body.scrollTop;
gear = document.querySelector(".gear");
setInterval(replace, 1000 / refreshRate); // 1000 / 60 = 16.666... Invokes function "replace" to update for each frame
}
window.addEventListener("DOMContentLoaded", setup);
A working example can be used on my GitHub.
I have tested it on Firefox, Chrome and Edge (works).
Other alternatives to avoiding the warning are to use css sticky elements or use the element.classList.add() and element.classList.remove() methods limnked to a window.onscroll event.
Note: Be careful about using css transitions where the length of the transition is longer than the interval at which the CSS style will be updated by the script (such as with scrolling event based changes). Webkit based browsers and EdgeHTML will behave in unexpected ways to this, usually staying in their initial position until the element stops being updated by the script. Unless this is the effect you were intending, in which case it doesn't work the same way in firefox.
Servo Webrender, when integrated into Firefox will solve these problems to an extent (or at least improve the performance quite considerably). Although there will still be other browsers to maintain compatibility with.