我试图通过使用 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>最佳答案
使用 requestAnimationFrame ，您将获得更顺畅的 throttle 。
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>关于javascript - 在 Firefox 中更平滑的滚动过渡？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38626045/