8

現在、レスポンシブ サイトで少し問題が発生しています。

1 つを除くすべてのページで、携帯電話でインターネットを使用する場合に通常得られるスクロールの勢いが得られません。これがモバイル サファリに限定されているのか、他のモバイル ブラウザーに限定されているのかはわかりませんが、このサイトでレスポンシブ作業を開始したばかりです。

しかし、一部のページにスクロールの勢いがない理由を知っている人はいますか? 一部のページは画像と少しの jQuery でかなり重くなっていますが、レンダリングの問題を引き起こすほど十分ではないと思います。

何か案は？

開発サイトへのリンクはapt.codeplayground.co.ukです。

[編集]

.wrapperこれは機能していた about ページに含まれていなかったため、div に問題があるようです。スクロールが適切に機能しないことを含めました。

4

3 に答える 3

4

本体のみがネイティブ スクロールを取得します。オーバーフロー スクロールを持つ要素はすべて非常に低速です。タッチスクロールで修正できますが、できれば本体をスクロールさせたほうがよいでしょう。これははるかに高速で、GPU テクスチャ合成をより適切に使用します。

スクロールを開始すると、スクロール可能な要素のスナップショットを作成してスクロールします。その画像を GPU テクスチャとして追加し、スクロールを停止すると GPU テクスチャを破棄します。ボディ スクロールを許可すると、テクスチャ メモリがよりよく使用され、通常はより適切な解決策になります。

于 2013-10-24T04:16:16.300 に答える
4

css プロパティに関して @Mark が言ったことに加えて、このプロパティをスクロールされたコンテンツの親に与える必要があることを覚えておく必要があります。

つまり、スクロールが必要なコンテンツのコンテナーで勢いが働く可能性があります。コンテンツに直接ではなく、そうでなければ、彼はどのように、何のために勢いをつけるべきかを理解できません.

.element_that_scrolls
{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
} 

//Wrong
<ul class="element_that_scrolls">
    ...
</ul>

//Correct
<div class="element_that_scrolls">
    <ul>
        ...
    </ul>
</div>
于 2014-04-07T17:40:37.970 に答える