Javascript滑动元素性能

Question

(function() {

        window.onscroll = function () {
            var sideBars = document.getElementsByClassName("sideBar");
            var y = window.pageYOffset;
            var threshold = 200;
            var marge = 15;
            if(threshold - y >= marge) {
                for(var i=0; i<sideBars.length; i++) { sideBars[i].style = "top: " + (threshold - y) + "px ;"; }
            } else {
                for(var i=0; i<sideBars.length; i++) { sideBars[i].style = "top: " + marge + "px ;"; }
            }
        };

    })();

.sideBar { position: fixed; top: 200px; width: 300px; background-color: lightgreen; }

#sideBarLeft { left: 10px; }

<div id="sideBarLeft" class="sideBar">
  <p>Quack.</p>
</div>
<div style="height: 1800px; background-color: yellow"></div>

我用纯 Javascript 编写了一个小函数来在用户滚动页面时滑动元素。

(function() {

        window.onscroll = function () {
            var sideBars = document.getElementsByClassName("sideBar");
            var y = window.pageYOffset;
            var threshold = 200;
            var marge = 15;
            if(threshold - y >= marge) {
                for(var i=0; i<sideBars.length; i++) { sideBars[i].style = "top: " + (threshold - y) + "px ;"; }
            } else {
                for(var i=0; i<sideBars.length; i++) { sideBars[i].style = "top: " + marge + "px ;"; }
            }
        };

})();

它工作得很好，但随着用户滚动页面，浏览器似乎变得越来越慢。我怀疑某处有内存泄漏或有问题，但我不知道是什么，因为我不是 JS 专家

你们中的一些人可以启发我这个问题吗？

(尝试使用 mozilla firefox 38.0.5)

stackoverflow 代码片段表明不会重现该问题。

编辑

Ahmed 建议使用 translateY CSS 函数而不是重置“top”属性。这样，它就像一个魅力:

(function() {

    window.onscroll = function () {
        var sideBars = document.getElementsByClassName("sideBar");
        var y = window.pageYOffset;
        var origin = 200;
        var marge = 15;
        var offset = origin-y >= marge ? -y : marge-origin;

        for(var i=0; i<sideBars.length; i++) { sideBars[i].style.transform = "translateY(" + offset + "px"; }

    };

})();

Answer 1

除了 Marcos 回答之外，每次用户滚动时，top 都会重置，并且会出现重绘。你应该使用translate。

您可以在此处阅读更多信息 https://css-tricks.com/tale-of-animation-performance/