firefox中更平滑的滚动过渡

我正试图通过使用onscroll事件修改元素的顶部位置来在firefox中创建视差效果。我抑制了onscroll事件，这样它就不会超载浏览器，我还在css中添加了一个transition top属性，使事情更顺利。这在每个浏览器中都能很好地工作，但由于某种原因，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

使用requestAnimationFrame，您将获得更平滑的节流器。

CCD_ 2具有与屏幕刷新率同步的优点。

这是一个代码演示：

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

事件"onscroll"是在滚动之后引起的，事件"onmousewheel"（"nwheel"）是在滚动后引起的。对于使用鼠标滚动的动画会更流畅。

此处的示例：excube.hol.es

在可能的情况下，您应该使用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

相关内容

最新更新

热门标签：