From 94e8f8c474d5a10be866af1bc2eb0dd515a7228f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 12 Oct 2021 01:31:31 +0900 Subject: CSS スクロールスナップに関するページを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - scroll-margin-block-end および scroll-margin-block-start は新規翻訳 - 「CSS スクロールスナップの基本概念」は新規翻訳 - それ以外は 2021/10/09 時点の英語版に同期 --- files/ja/web/css/scroll-snap-stop/index.md | 239 ++++++++++++++--------------- 1 file changed, 119 insertions(+), 120 deletions(-) (limited to 'files/ja/web/css/scroll-snap-stop') diff --git a/files/ja/web/css/scroll-snap-stop/index.md b/files/ja/web/css/scroll-snap-stop/index.md index b9f4d8b80b..bb974027f9 100644 --- a/files/ja/web/css/scroll-snap-stop/index.md +++ b/files/ja/web/css/scroll-snap-stop/index.md @@ -5,15 +5,18 @@ tags: - CSS - CSS スクロールスナップ - Reference + - Web + - recipe:css-property - scroll-snap-stop - - ウェブ +browser-compat: css.properties.scroll-snap-stop translation_of: Web/CSS/scroll-snap-stop --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}} -

CSS の scroll-snap-stop プロパティは、スクロールコンテナーが可能なスナップ位置を「通り過ぎる」ことを許可するかどうかを定義します。

+**`scroll-snap-stop`** は [CSS](/ja/docs/Web/CSS) のプロパティで、スクロールコンテナーが可能なスナップ位置を「通り過ぎる」ことを許可するかどうかを定義します。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-snap-stop: normal;
 scroll-snap-stop: always;
 
@@ -21,32 +24,35 @@ scroll-snap-stop: always;
 scroll-snap-type: inherit;
 scroll-snap-type: initial;
 scroll-snap-type: unset;
-
+``` -

{{cssinfo}}

+## 構文 -

構文

+### 値 -

値

+- `normal` + - : スクロールコンテナーの視覚{{Glossary("viewport", "ビューポート")}}がスクロールされた時、可能なスナップ位置を「通り過ぎる」ことを許可します。 +- `always` + - : スクロールコンテナーは可能なスナップ位置を「通り過ぎる」ことを許可しません。最初の要素のスナップ位置にスナップします。 -
-
normal
-
スクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}がスクロールされた時、可能なスナップ位置を「通り過ぎる」ことがあります。
-
always
-
スクロールコンテナーは可能なスナップ位置を「通り過ぎる」ことはありません。最初の要素のスナップ位置にスナップします。
-
+## 公式定義 -

形式文法

+{{CSSInfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +

様々な軸でのスナップ

-

この例は {{cssxref("scroll-snap-type")}} から複製したものに多少の修正を加えたものです。

+この例は {{cssxref("scroll-snap-type")}} から複製したものに多少の修正を加えたものです。 -

CSS

+#### CSS -
/* setup */
+```css
+/* setup */
 :root, body {
   height: 100%;
   display: flex;
@@ -74,10 +80,10 @@ scroll-snap-type: unset;
   flex-flow: column nowrap;
 }
 /* definite scroll snap */
-.mandatory-scroll-snapping {
+.mandatory-scroll-snapping > div {
   scroll-snap-stop: always;
 }
-.proximity-scroll-snapping {
+.proximity-scroll-snapping > div {
   scroll-snap-stop: normal;
 }
 /* scroll-snap */
@@ -97,128 +103,121 @@ scroll-snap-type: unset;
   scroll-snap-type: y proximity;
 }
 
-.container > div {
+.container > div {
   text-align: center;
   scroll-snap-align: center;
   flex: none;
 }
 
-.x.container > div {
+.x.container > div {
   line-height: 128px;
   font-size: 64px;
   width: 100%;
   height: 128px;
 }
 
-.y.container > div {
+.y.container > div {
   line-height: 256px;
   font-size: 128px;
   width: 256px;
   height: 256px;
 }
 /* appearance fixes */
-.y.container > div:first-child {
+.y.container > div:first-child {
   line-height: 1.3;
   font-size: 64px;
 }
 /* coloration */
-.container > div:nth-child(even) {
+.container > div:nth-child(even) {
   background-color: #87EA87;
 }
 
-.container > div:nth-child(odd) {
+.container > div:nth-child(odd) {
   background-color: #87CCEA;
 }
-
- -

HTML

- -
<div class="container x mandatory-scroll-snapping" dir="ltr">
-  <div>X Mand. LTR </div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container x proximity-scroll-snapping" dir="ltr">
-  <div>X Proximity LTR</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container y mandatory-scroll-snapping" dir="ltr">
-  <div>Y Mand. LTR</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container y proximity-scroll-snapping" dir="ltr">
-  <div>Y Prox. LTR</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container x mandatory-scroll-snapping" dir="rtl">
-  <div>X Mandatory RTL</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container x proximity-scroll-snapping" dir="rtl">
-  <div>X Proximity RTL</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container y mandatory-scroll-snapping" dir="rtl">
-  <div>Y Mand. RTL</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container y proximity-scroll-snapping" dir="rtl">
-  <div>Y Prox. RTL</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
- -

{{EmbedLiveSample("Example", "100%", "1630")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-stop", "scroll-snap-stop")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.properties.scroll-snap-stop")}}

+``` + +#### HTML + +```html +
+
X Mand. LTR
+
2
+
3
+
4
+
5
+
+ +
+
X Proximity LTR
+
2
+
3
+
4
+
5
+
+ +
+
Y Mand. LTR
+
2
+
3
+
4
+
5
+
+ +
+
Y Prox. LTR
+
2
+
3
+
4
+
5
+
+ +
+
X Mandatory RTL
+
2
+
3
+
4
+
5
+
+ +
+
X Proximity RTL
+
2
+
3
+
4
+
5
+
+ +
+
Y Mand. RTL
+
2
+
3
+
4
+
5
+
+ +
+
Y Prox. RTL
+
2
+
3
+
4
+
5
+
+``` + +#### 結果 + +{{EmbedLiveSample("Snapping_in_different_axes", "100%", "1630")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) -- cgit v1.2.3-54-g00ecf