From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../guide_to_scroll_anchoring/index.html | 96 ++++++++++++++++++++++ files/ja/web/css/overflow-anchor/index.html | 89 ++++++++++++++++++++ 2 files changed, 185 insertions(+) create mode 100644 files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html create mode 100644 files/ja/web/css/overflow-anchor/index.html (limited to 'files/ja/web/css/overflow-anchor') diff --git a/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html b/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html new file mode 100644 index 0000000000..4ebcf8b854 --- /dev/null +++ b/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html @@ -0,0 +1,96 @@ +--- +title: スクロールアンカリングの紹介 +slug: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring +tags: + - CSS + - Guide + - overflow-anchor + - scroll anchoring + - スクロールアンカリング +translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring +--- +
{{CSSRef}}
+ +

ウェブのユーザーであれば、おそらくスクロールアンカリングが解決する問題をよく知っているはずです。速度の遅い接続で長いページを閲覧し、コンテンツを読むためにスクロールを始めるとします。一所懸命に読んでいる間に、ページの見ている部分が突然ジャンプしてしまうことがあります。これはコンテンツの上部に、大きな画像やその他の要素が読み込まれたことによって引き起こされます。

+ +

スクロールアンカリング (scroll anchoring) はブラウザーの機能で、ユーザーが既に文書の新しい部分にスクロールした後で、コンテンツが読み込まれたことでページ内容の移動が発生してしまう問題を解決するためのものです。

+ +

どのように動作するか

+ +

スクロールアンカリングは、表示域 (viewport) 外で起こった変化に対し、スクロール位置を調整する機能です。つまり、文書内のスクロール位置が実際には変わっているのにも関わらず、ユーザーが見ていた個所が表示域に留まり続けます。

+ +

スクロールアンカリングを有効にするには

+ +

何もする必要はありません。この機能は、対応しているブラウザーでは既定で有効になっています。ほとんどの場合において、スクロールを固定することは望み通りでしょう。 — コンテンツが急に移動してしまうのは、誰にとっても使い勝手が悪いものです。

+ +

デバッグする必要がある場合

+ +

スクロールアンカリングを有効にしてページの動作がうまくいかない場合は、一部の scroll イベントリスナーがアンカーノードの動きを補うための余分なスクロールをうまく処理していないことが原因とかもしれません。

+ +

Firefox では about:config で layout.css.scroll-anchoring.enabled を false に変更してスクロールアンカリングを無効にすることで、問題が解決するかどうかを確認できます。

+ +

解決した場合は、Firefox がアンカーとして使用しているノードを layout.css.scroll-anchoring.highlight スイッチで確認できます。これにより、アンカーノードの上に紫色のオーバーレイが表示されます。

+ +

あるノードがアンカーとして適切でないと思われる場合は、以下のように {{cssxref("overflow-anchor")}} を使用してそのノードを除外することができます。

+ +

無効にする必要がある場合は

+ +

仕様書では、新しいプロパティである {{cssxref("overflow-anchor")}} を追加し、スクロールアンカリングを文書全体、もしくは一部で無効にできるようにしています。基本的には、自動的に有効にされたスクロールアンカリングをオプトアウトする仕組みです。

+ +

指定できる値は、 auto または none のどちらかです。

+ + + +

文書全体でスクロールアンカリングを無効にするには、 {{htmlelement("body")}} 要素にプロパティを指定してください。。

+ +
body {
+  overflow-anchor: none;
+}
+ +

文書の特定の部分でスクロールアンカリングを無効にしたい場合は、そのコンテンツを囲む要素に overflow-anchor: none を指定します。

+ +
.container {
+  overflow-anchor: none;
+}
+ +
+

注: 仕様書にも書かれていますが、スクロールアンカリングが無効にされた場合、その子孫要素から再び有効にすることはできません。例えば、スクロールアンカリングが文書全体で無効にされた際、文書内の一部に overflow-anchor: auto を指定しても、その部分でスクロールアンカリングは動作しません。

+
+ +

抑制トリガー

+ +

仕様書では、問題になる可能性がある場合はその場でスクロールアンカリングを無効にする、抑制トリガー (suppression triggers) についても説明しています。スクロールアンカリングを指定したノードもしくはその祖先でトリガーが発生した場合、スクロールアンカリングが抑制されます。

+ +

抑制トリガーとなるのは、次のプロパティの計算値 (computed value) が変更された場合です。

+ + + +

さらに、スクロールボックス内の任意の場所で {{cssxref("position")}} を変更した場合もスクロールアンカリングが無効になります。

+ +
+

バグ {{bug(1584285)}} で、Firefox Nightly に layout.css.scroll-anchoring.suppressions.enabled フラグが追加され、これらのトリガーを無効化できるようになりました。

+
+ +

その他の解説

+ + + +

ブラウザーの互換性

+ +

ブラウザーでスクロールアンカリングが利用できるかどうかを検査する必要がある場合は、特性クエリを使用して overflow-anchor プロパティに対応しているかどうかを検査してください。

+ + + +

{{Compat("css.properties.overflow-anchor")}}

diff --git a/files/ja/web/css/overflow-anchor/index.html b/files/ja/web/css/overflow-anchor/index.html new file mode 100644 index 0000000000..2324422d27 --- /dev/null +++ b/files/ja/web/css/overflow-anchor/index.html @@ -0,0 +1,89 @@ +--- +title: overflow-anchor +slug: Web/CSS/overflow-anchor +tags: + - CSS + - CSS Property + - CSS Scroll Anchoring + - CSS スクロールアンカリング + - CSS プロパティ + - Reference + - overflow-anchor + - スクロールアンカリング +translation_of: Web/CSS/overflow-anchor +--- +
{{CSSRef}}
+ +

overflow-anchor は CSS のプロパティで、コンテンツの移動を最小化するためにスクロール位置を調整する、ブラウザーのスクロールアンカリングの動作をオプトアウトする方法を提供します。

+ +

スクロールアンカリングの動作は、対応しているすべてのブラウザーで既定で有効になっています。したがって、このプロパティを変更するのは通常、文書または文書の一部でスクロールアンカリングによって操作上の問題が発生し、この動作をオフにする必要がある場合のみです。

+ +

構文

+ +
/* キーワード値 */
+overflow-anchor: auto;
+overflow-anchor: none;
+
+/* グローバル値 */
+overflow-anchor: inherit;
+overflow-anchor: initial;
+overflow-anchor: unset;
+
+ +

値

+ +
+
auto
+
その要素は、スクロール位置を調整するときにアンカー候補になります。
+
none
+
その要素はアンカー候補として選択されません。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

文書内でスクロールアンカリングを抑止する場合は、 overflow-anchor プロパティを使用してください。

+ +
body {
+  overflow-anchor: none;
+}
+
+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Scroll Anchoring', '#propdef-overflow-anchor', 'overflow-anchor')}}{{Spec2('CSS Scroll Anchoring')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.overflow-anchor")}}

+ +

関連項目

+ + -- cgit v1.2.3-54-g00ecf