スクロールバー反射

Mac開発者、このヒントに注意してください：システム設定> general> show Scrollbarsに移動し、常に表示する設定を変更します。これはあなたのためではなく、Webページの最高のプレゼンテーションのためです。この設定がなければ、Scrollbarによってトリガーされたレイアウトオフセットは発生しませんが、この設定が有効になっている他のすべてのユーザーが遭遇するからです。このようなパフォーマンスの問題を回避するには、この設定を自分で使用する必要があります。

Stefan Judisは、ビューポートユニットの使用がこの問題の理由の1つである可能性があることを示しています。

コードの100vwは、垂直スクロールバーがすでに存在し、スペースの一部を占めるため、水平オーバーフローを引き起こします。これは非常に不合理に感じますが、それは真実です。

Stefanは、この問題への対処に関するKilian Valkhofの記事を指摘しています。古典的な解決策：

簡単な方法はwidth: 100%を使用することです。パーセンテージには、スクロールバーの幅が含まれていないため、自動的に適応します。

これができない場合、または別の要素の幅を設定した場合は、 overflow-x: hiddenまたはoverflow: hidden 、スクロールバーを防ぎます。

Kilian Valkhof 、「水平スクロールバーの理由を見つける方法」

これらのどれもあなたのニーズを完全に満たしていないため、これらはすべて手段だと思います。

幸いなことに、仕様ベースのソリューションがまもなく登場します。 Bramusはこれについて報告しました：

Webページにスクロールバーを表示する際の副作用は、スクロールバーのタイプに応じてコンテンツのレイアウトが変更される可能性があることです。 scrollbar-gutter CSSプロパティ（Chromium Soonでリリース）は、開発者がこれをより制御できるように設計されています。

Bramus van Damme 、「 scrollbar-gutter CSS属性を使用して、Scrollbarsによって引き起こされる予期しないレイアウトオフセットを防ぐ」

これは回避策のように聞こえますが、これがリセットスタイルシートで非常に一般的なコードラインになることは間違いありません。

体 {
  Scrollbar-Gutter：安定した両方のエッジ。
}

しかし、これは私に思い出させます...ページレベル全体でScrollbarの問題を扱うとき、それはうまくいくのはscrollbar-gutterプロパティですよね？ overflow属性の代わりに？ overflowプロパティは、関連する側面をスクロールすることに関して、過去に奇妙でした。すべてのブラウザに実際に実装できますか？知るか。それは非常に可能性が高いように見えますが、それが近くで、仕様に従って動作している場合でも、私はそれを使用してみます。進行性の強化に適していると感じています。

以上がスクロールバー反射の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。