web-dev-qa-db-ja.com

overflow:Scrollを使用すると、mobile / iosでのスクロールが遅くなります。

キャンバス外メニューを設定するには、本文を「overflow:hidden」に設定して、本文からスクロールを削除し、「overflow-y:scroll」でコンテンツの周りのコンテナに追加し直す必要があります。これを行うと、モバイル、特にiOSデバイスでのスクロールが遅くなるようです。

本体からスクロールバーを移動する際に何らかのパフォーマンスの問題がありますか?

44
grasesed

パフォーマンスの問題ではなく、iOSデバイスで「Momentum」スクロールが表示されない可能性があります

これは、スクロール要素に「-webkit-overflow-scrolling:touch」を追加することで解決できます。

.scrolling-content {
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   height:100%; /*A value other than height:auto needs to be set*/
}

デフォルトでは、iOSデバイスは本文で「運動量」スクロールを使用しますが、要素に「overflow-y:scroll」を追加しても、デフォルトでは要素が「運動量」スクロールに設定されません

詳細については https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling を参照してください

注:-webkit-overflow-scrollingを使用したGotcha/Bugsがいくつかあります。特定のブラウザーをタッチします

101
sjm