遅いデバイスでのスムーズなスクロールパフォーマンス

Question

私は、ラズベリーパイ3と電子アプリを使用してスマートミラーを構築しています。だから、私のフロントエンドは、基本的に単一のページアプリを持つクロムです。ミラーには下にボタンがあり、その中にはスクロール用のものもあるので、それらをタップするとコンテンツのスクロールを200ピクセルスムーズにスクロールしたい。現在、私はjQueryを使用しています：

$('#content').animate({scrollTop: $('#content').scrollTop + 200}) 

アニメーションはあまり流動的ではなく、pi3のパフォーマンスが低いために動きが遅くなりました。私はこれを滑らかにする方法があるかどうかを知りたいと思います。ネイティブのブラウザAPIはありませんので、私はCSSで何かを考えていて、おそらく内部に子要素を翻訳しています。これを行うための流動的な方法はありますか？

EDIT： 私は、以下のCSSの構造を試してみた：十分なsxクラスがあるように

#container { 
    overflow-y: hidden; 
    height: 200px; 
} 
#content { 
    transition: transform 0.2s ease-out; 
    transform: translate(0,0); 
} 
#content.s1 { 
    transform: translate(0,-200px); 
} 
#content.s2 { 
    transform: translate(0,-400px); 
} 

さて問題は、コンテンツがどのように背の高い知っているし、動的に適切なルールを追加することであろうと、最後のものが一番下までスクロールして、コンテンツの下に醜い隙間が残らないようにします。これはJavascriptで可能ですか？

Answer 1

スクロールのパフォーマンスは、位置の固定などの非常に多くの要因によって影響を受ける可能性があります。ゆっくりとしたスクロール（別名ジャンク）が他の要因によっても発生する可能性があります。

正しくアニメーション化するときは、常にCSSの変形または不透明度を使用してください。

リクエストを実装するには、JavaScriptを使用してトランスフォームを設定していますが、CSSでアニメーション化しています。もちろん、スクロールの制限を追加する必要がありますが、私はそれが説明されるべきだと思う：固定の問題はここにある：

var obj = document.getElementById("innerContent"); 

document.getElementById("down").addEventListener("click", function() { 
    var scrollY = obj.getAttribute("data-scrollY"); 
    scrollY = parseInt(scrollY) - 200; 
    obj.setAttribute("data-scrollY", scrollY) 
    obj.style.transform = "translateY(" + scrollY + "px)"; 
}); 

document.getElementById("up").addEventListener("click", function() { 
    var scrollY = obj.getAttribute("data-scrollY"); 
    scrollY = parseInt(scrollY) + 200; 
    obj.setAttribute("data-scrollY", scrollY) 
    obj.style.transform = "translateY(" + scrollY + "px)"; 
}); 

http://codepen.io/kevinfarrugia/pen/egdPJX