在Firefox更平滑的滚动过渡？ [英] Smoother scroll transitions in firefox?
问题描述
我试图通过使用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 style.top = -scrollDistance * 0.5 +px; document.getElementById（fore）。style.top = -scrollDistance * 0.9 +px;}，100）; document.getElementById ;函数throttle（回调，限制）{var wait = false; return function（）{if（！wait）{callback.call（）; wait = true; setTimeout（function（）{wait = false;}，limit）; }}}
body {height：5000px;背景：url（http://lorempixel.com/output/city-q-c-1920-1920-4.jpg）;} .parallaxEl {width：1920px; height：1080px;位置：固定; 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）;} code>
< body> < div class =parallaxElid =back>< / div> < div class =parallaxElid =mid>< / div> < div class =parallaxElid =fore>< / div>< / body>
http://codepen.io/anon/pen/NAzBrX
https://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/ a> 另外，这里是一个使用这种技术的基本视差效果的例子... https://css-tricks.com/tour-performant-responsive-css-site/#article-header-id-2 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?
http://codepen.io/anon/pen/NAzBrX When possible you should use CSS 3D Transforms for animation because it has access to a users GPU and allows for smoother animation. Hardware Acceleration and CSS Animation https://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/ Also, here is an example of a basic parallax effect using this technique... https://css-tricks.com/tour-performant-responsive-css-site/#article-header-id-2 这篇关于在Firefox更平滑的滚动过渡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
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>
