私はウェブサイトを開発しています: http://www.techniquetolife.com これは基本的に、ウィンドウサイズの div 内のウィンドウの 5 倍の大きさの div であり、大きな div 内に他の div があり、overscroll および scrollTo プラグインを使用してナビゲートします。
Web サイトは、OS/X 用の Safari および Firefox で完全に正常に動作します。しかし、Chromeで動作させるのに深刻な問題があります。Chrome OS/X のみの問題かどうかはわかりませんが、大きな div 内の内側の div の 1 つをスクロールすると、ブラウザー全体の速度が低下します。これは Chrome でのみ発生します...
オーバースクロールを無効にしてスクロールバーを使用すると、100% 正常に動作しますが、オーバースクロール ドラッグを使用してスクロール プラグインを使用したいと考えています。
私はコーディングが得意ではないので、どんな助けでも大歓迎です。
すべてのプラグイン/ブラウザは最新バージョンです。
さて、これも関連していると思われる同様の質問への回答を投稿しました。私は間違っているかもしれませんが、あなたはそれをテストすることができます.
ここで完全な質問と私の完全な回答を参照してください:固定位置要素を使用した Chrome の低速スクロール
これは、Chrome が何らかの理由で、固定パネルがその上を通過したときに画像を再デコードしてサイズ変更する必要があると判断したためです。あなたはこれを特によく見ることができます
► ページを右クリック -> 要素の検査 -> タイムライン -> フレーム
► 一番下の Record を押します
► ページに戻り、スクロールバーを上下にドラッグします
これは、下位要素を再描画する必要があるかどうかを判断するために Chrome が使用している方法に問題があるようです。
さらに悪いことに、スクロール可能な div の上に div を作成してposition:fixed属性の使用を回避しても、問題を回避することはできません。これは実際には同じ効果を引き起こします。Chrome では、ページ上の何かを画像の上に描画する必要がある場合 (iframe、div、またはそれが何であれ)、その画像を再描画すると言っています。したがって、スクロールしているdiv/frameに関係なく、問題は解決しません。
しかし、この問題を回避するためのハックを 1 つ見つけました。これには、今のところマイナス面はないようです。追加することで
-webkit-transform: translateZ(0);
固定パネルに、その div を独自の合成レイヤーに配置します。