Question

我正在尝试通过使用onscroll事件修改元素的顶部位置来在firefox中创建视差效果。我限制了onscroll事件，因此它不会使浏览器超载，我在css中添加了一个转换顶级属性，以使事情更顺畅。这在每个浏览器中都能很好地工作，但是由于某些原因，firefox非常不稳定。有没有办法让这种转变更顺畅？

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

Answer 1

如果可能，您应该将CSS 3D Transforms用于动画，因为它可以访问用户GPU并允许更流畅的动画。

硬件加速和CSS动画

https://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/

此外，这是使用这种技术的基本视差效果的一个例子......

https://css-tricks.com/tour-performant-responsive-css-site/#article-header-id-2

Answer 2

使用requestAnimationFrame，您将获得更顺畅的节流器。

requestAnimationFrame具有与屏幕刷新率同步的优势。

这是一个代码演示：

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

Answer 3

事件'onscroll'是在滚动后引起的，并且在滚动后引起事件'onmousewheel'（'onwheel'）。使用鼠标动画滚动会更顺畅。

此处示例：excube.hol.es

firefox中滚动过渡更平滑？

3 个答案: