Firefox中更平滑的滾動過渡？

我試圖通過使用onscroll事件修改元素的頂部位置來在Firefox中創建視差效果。我扼殺了onscroll事件，因此它不會重載瀏覽器，並且我在css中添加了一個transition top屬性以使事情更順暢。這在每個瀏覽器中都能很好地工作，但由於某種原因，Firefox非常不穩定。有沒有辦法讓這個過渡更順暢？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

來源

2016-07-28 Eric

如果可能的話，你應該使用CSS 3D變換的動畫，因爲它獲得了用戶的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

來源

2016-07-28 02:36:21

使用requestAnimationFrame，你會得到更流暢的thrott LER。

的優點是可以與屏幕刷新率同步。

下面是一個代碼演示：

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

來源

2016-07-28 02:52:33 Kaiido

事件 'onscroll' 是一個滾動後引起的，而該事件 'onmousewheel'（ 'onwheel'）是一個滾動後引起。對於使用鼠標動畫的滾動將會更加順暢。

示例：excube.hol.es

來源

2016-08-12 05:28:14