Firefoxでのスムーズなスクロールの切り替えは？

私は、onscrollイベントを使用して要素の先頭位置を変更して、firefoxで視差効果を作成しようとしています。私はonscrollイベントを抑制してブラウザをオーバーロードしないようにし、CSSをトランジショントッププロパティに追加してスムーズにしました。これはすべてのブラウザでうまく動作しますが、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

それがユーザーのGPUへのアクセスを持っており、スムーズなアニメーションが可能になりますので、あなたがアニメーションのためのCSS 3Dトランスフォームを使用する必要があります可能。

ハードウェアアクセラレーションと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、スムーズなスロートが得られます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