From 95bf5d4c3e7513c56cd1908986d74fd52914566c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 31 Dec 2021 21:08:34 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/scroll-behavior/index.md | 127 +++++++++++++----------------- 1 file changed, 56 insertions(+), 71 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/css/scroll-behavior/index.md b/files/ja/web/css/scroll-behavior/index.md index 83bd288ebe..4c7cdaa71b 100644 --- a/files/ja/web/css/scroll-behavior/index.md +++ b/files/ja/web/css/scroll-behavior/index.md @@ -3,81 +3,82 @@ title: scroll-behavior slug: Web/CSS/scroll-behavior tags: - CSS - - CSS Property - CSS プロパティ - CSSOM View - - Reference - - 'recipe:css-property' + - リファレンス + - recipe:css-property +browser-compat: css.properties.scroll-behavior translation_of: Web/CSS/scroll-behavior --- -

{{CSSRef}}

+{{CSSRef}} -

scroll-behavior は CSS のプロパティで、ナビゲーションや CSSOM のスクローリング API によってスクロールするボックスにスクロールが発生した際の、そのスクロールの振る舞いを設定します。

+**`scroll-behavior`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ナビゲーションや CSSOM のスクローリング API によってスクロールするボックスにスクロールが発生した際の、そのスクロールの振る舞いを設定します。 -
{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}
+{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}} - +なお、ユーザーが実行したスクロールなど、その他のスクロールはこのプロパティの影響を受けません。このプロパティがルート要素に指定された場合は、代わりにビューポートに適用されます。このプロパティが `body` 要素に指定された場合は、ビューポートには適用され*ません*。 -

なお、ユーザーが実行したスクロールなど、その他のスクロールはこのプロパティの影響を受けません。このプロパティがルート要素に指定された場合は、代わりにビューポートに適用されます。このプロパティが body 要素に指定された場合は、ビューポートには適用されません。

+ユーザーエージェントは、このプロパティを無視することができます。 -

ユーザーエージェントは、このプロパティを無視することができます。

+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-behavior: auto;
 scroll-behavior: smooth;
 
 /* グローバル値 */
 scroll-behavior: inherit;
 scroll-behavior: initial;
+scroll-behavior: revert;
 scroll-behavior: unset;
-
+``` -

scroll-behavior プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

+`scroll-behavior` プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。 -

値

+### 値 -
-
auto
-
スクロールするボックスは瞬時にスクロールします。
-
smooth
-
スクロールするボックスは、ユーザーエージェント定義のタイミング関数を使い、ユーザーエージェント定義の時間をかけて、円滑ににスクロールします。もし存在するなら、ユーザーエージェントはプラットフォームの慣例に従うべきです。
-
+- `auto` + - : スクロールするボックスは瞬時にスクロールします。 +- `smooth` + - : スクロールするボックスは、ユーザーエージェント定義のタイミング関数を使い、ユーザーエージェント定義の時間をかけて、円滑ににスクロールします。もし存在するなら、ユーザーエージェントはプラットフォームの慣例に従うべきです。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

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

例

+## 例 -

スクロールの動きをスムーズに設定

+### スクロールの動きをスムーズに設定 -

HTML

+#### HTML -
<nav>
-  <a href="#page-1">1</a>
-  <a href="#page-2">2</a>
-  <a href="#page-3">3</a>
-</nav>
-<scroll-container>
-  <scroll-page id="page-1">1</scroll-page>
-  <scroll-page id="page-2">2</scroll-page>
-  <scroll-page id="page-3">3</scroll-page>
-</scroll-container>
+```html + +
+
1
+
2
+
3
+
+``` -

CSS

+#### CSS -
a {
+```css
+a {
   display: inline-block;
   width: 50px;
   text-decoration: none;
 }
-nav, scroll-container {
+nav, .scroll-container {
   display: block;
   margin: 0 auto;
   text-align: center;
@@ -87,45 +88,29 @@ nav {
   padding: 5px;
   border: 1px solid black;
 }
-scroll-container {
-  display: block;
+.scroll-container {
   width: 350px;
   height: 200px;
   overflow-y: scroll;
   scroll-behavior: smooth;
 }
-scroll-page {
+.scroll-page {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   font-size: 5em;
 }
-
- -

結果

- -

{{ EmbedLiveSample("Setting_smooth_scroll_behavior", "100%", 250) }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}{{Spec2('CSSOM View')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scroll-behavior")}}

+``` + +#### 結果 + +{{ EmbedLiveSample("Setting_smooth_scroll_behavior", "100%", 250) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -- cgit v1.2.3-54-g00ecf