Smoother scroll transitions in firefox?

问题

I'm trying to create a parallax effect in firefox by modifying the top position of elements using the onscroll event. I throttled the onscroll event so it doesn't overload the browser and I added a transition top property in the css to make things smoother. This works pretty well in every browser, but firefox is extremely choppy for some reason. Is there any way to make this transition smoother?

window.onscroll = throttle(function(){
  var scrollDistance = window.pageYOffset || window.document.documentElement.scrollTop || window.document.body.scrollTop;
  document.getElementById("back").style.top = -scrollDistance * 0.3 + "px";
  document.getElementById("mid").style.top = -scrollDistance * 0.5 + "px";
  document.getElementById("fore").style.top = -scrollDistance * 0.9 + "px";
}, 100);

function throttle (callback, limit) {
    var wait = false;
    return function () {
        if (!wait) {
            callback.call();
            wait = true;
            setTimeout(function () {
                wait = false;
            }, limit);
        }
    }
}

body{
  height: 5000px;
  background: url(http://lorempixel.com/output/city-q-c-1920-1920-4.jpg);
}

.parallaxEl {
  width: 1920px;
  height: 1080px;
  position: fixed;
  transition: top 0.1s;
}

#back{
  background: url(http://wall.rimbuz.com/wp-content/uploads/4K-Wide-Wallpapers.jpg);
}

#mid{
  background: url(https://wallpaperscraft.com/image/space_planet_background_83807_3840x2160.jpg);
}

#fore{
  background: url(http://wall.rimbuz.com/wp-content/uploads/4K-HD-Background-Wallpapers.jpg);
}

<body>
  <div class="parallaxEl" id="back"></div>
  <div class="parallaxEl" id="mid"></div>
  <div class="parallaxEl" id="fore"></div>
</body>

http://codepen.io/anon/pen/NAzBrX

回答1:

Using requestAnimationFrame, you'll get a smoother throttler.

requestAnimationFrame has the advantage to be synced with the screen refresh rate.

Here is a code demo :

// your callback
var scrollHandler = function() {
  var scrollDistance = window.pageYOffset || window.document.documentElement.scrollTop || window.document.body.scrollTop;
  document.getElementById("back").style.top = -scrollDistance * 0.3 + "px";
  document.getElementById("mid").style.top = -scrollDistance * 0.5 + "px";
  document.getElementById("fore").style.top = -scrollDistance * 0.9 + "px";
};

// the throttle function
// returns the function that should be passed has an event listener
var throttle = function(callback) {
  // a simple flag
  var active = false;
  // to keep track of the last event
  var evt;
  // fired only when screen has refreshed
  var handler = function(){
    // release our flag 
    active = false;
    // call the callback
    callback(evt);
    }
  // the actual event handler
  return function handleEvent(e) {
    // save our event at each call
    evt = e;
    // only if we weren't already doing it
    if (!active) {
      // raise the flag
      active = true;
      // wait for next screen refresh
      requestAnimationFrame(handler);
    };
  }
}
// remember to call the function, we need its returned function
window.onscroll = throttle(scrollHandler);

body {
  height: 5000px;
  background: url(http://lorempixel.com/output/city-q-c-1920-1920-4.jpg);
}
.parallaxEl {
  width: 1920px;
  height: 1080px;
  position: fixed;
  transition: top 0.1s;
}
#back {
  background: url(http://wall.rimbuz.com/wp-content/uploads/4K-Wide-Wallpapers.jpg);
}
#mid {
  background: url(https://wallpaperscraft.com/image/space_planet_background_83807_3840x2160.jpg);
}
#fore {
  background: url(http://wall.rimbuz.com/wp-content/uploads/4K-HD-Background-Wallpapers.jpg);
}

<body>
  <div class="parallaxEl" id="back"></div>
  <div class="parallaxEl" id="mid"></div>
  <div class="parallaxEl" id="fore"></div>
</body>

回答2:

The event 'onscroll' is caused after a scroll, and the event 'onmousewheel' ('onwheel') is caused after a scroll. For a scroll using a mouse animation will be more smoothly.

Example here: excube.hol.es