修改

Question

＆＃13;

(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 ;"; }
            }
        };

    })();

＆＃13;

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

＆＃13;

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

＆＃13;

我创建了一个小函数来滑动元素，因为用户在纯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功能，而不是重置＆＃34; top＆＃34;属性。这样，它就像一个魅力：

(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/

Answer 2

当用户调整大小或滚动页面时，onScroll事件会触发很多次。你可以为这个功能添加一个deboucer，很多都是，但我建议你使用下划线去抖功能：

http://underscorejs.org/#debounce

祝你好运

修改

我再次看到你的代码，你使用for（）并且sideBars长度有限。这个变量的最大数量是多少？

Answer 3

避免在循环中重新声明静态变量 Throttle你的函数只能每n毫秒运行一次：

＆＃13;

appendXXX

＆＃13;

(function() {    
    var sideBars = document.getElementsByClassName("sideBar"),
        threshold = 200, 
        marge = 15,
        freq = 25;//millisecond frequency for throttle (try increasing this to see it working)
    
    window.onscroll = throttle(function(){
        var y = window.pageYOffset,
            l = sideBars.length,
            t = (threshold - y >= marge) ? (threshold - y) : marge;        
        for(var i=0; i<l; i++) {
            sideBars[i].style.top =  t+"px";
        }
    },freq);
    
})();


function throttle(fn, threshhold, scope) {
  threshhold || (threshhold = 250);
  var last,
      deferTimer;
  return function () {
    var context = scope || this;
    var now = +new Date,
        args = arguments;
    if (last && now < last + threshhold) {
      // hold on to it
      clearTimeout(deferTimer);
      deferTimer = setTimeout(function () {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } else {
      last = now;
      fn.apply(context, args);
    }
  };
}

＆＃13;

html, body {margin:0; padding:0;}
.sideBar { position: fixed; top: 200px; width: 300px; background-color: lightgreen; }

#sideBarLeft { left: 10px; }

＆＃13;

Javascript滑动元素性能

3 个答案:

修改