2023/07/18 時点の英語版に同期

mdn · Jul 27, 2023 · cb688ad · cb688ad
1 parent 2d8f01d
commit cb688ad
Showing 1 changed file with 53 additions and 30 deletions.
diff --git a/files/ja/web/api/element/wheel_event/index.md b/files/ja/web/api/element/wheel_event/index.md
@@ -1,44 +1,67 @@
 ---
-title: 'Element: wheel イベント'
+title: "Element: wheel イベント"
+short-title: wheel
 slug: Web/API/Element/wheel_event
+l10n:
+  sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b
 ---
 
 {{APIRef}}
 
-**`wheel`** イベントは、ユーザーがポインティングデバイス (通常はマウス) のホイールボタンを回転させたときに発行されます。
+**`wheel`** イベントは、ユーザーがポインティングデバイス（通常はマウス）のホイールボタンを回転させたときに発行されます。
 
 このイベントは標準外、非推奨の {{domxref("Element/mousewheel_event", "mousewheel")}} イベントを置き換えるものです。
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">バブリング</th>
-      <td>あり</td>
-    </tr>
-    <tr>
-      <th scope="row">キャンセル</th>
-      <td>可</td>
-    </tr>
-    <tr>
-      <th scope="row">インターフェイス</th>
-      <td>{{domxref("WheelEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">イベントハンドラープロパティ</th>
-      <td>
-        {{domxref("GlobalEventHandlers.onwheel", "onwheel")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
-
 > **メモ:** `wheel` イベントと {{domxref("Element/scroll_event", "scroll")}} イベントを混同しないでください。 `wheel` イベントの既定のアクションは実装固有のものであり、必ずしも `scroll` イベントを発行するわけではありません。その場合でも、ホイールイベントの `delta*` 値は必ずしもコンテンツのスクロール方向を反映しているとは限りません。したがって、スクロールの方向を取得するために、 `wheel` イベントの `delta*` プロパティに頼らないようにしてください。代わりに、 `scroll` イベント内のターゲットの {{domxref("Element.scrollLeft", "scrollLeft")}} や {{domxref("Element.scrollTop", "scrollTop")}} の値の変化を検出するようにしてください。
 
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("wheel", (event) => {});
+
+onwheel = (event) => {};
+```
+
+## イベント型
+
+{{domxref("WheelEvent")}} です。{{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("WheelEvent")}}
+
+## イベントプロパティ
+
+_このインターフェイスには、祖先である {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, {{DOMxRef("Event")}} から継承したプロパティがあります。_
+
+- {{DOMxRef("WheelEvent.deltaX")}} {{ReadOnlyInline}}
+  - : 水平スクロール量を表す `double` を返します。
+- {{DOMxRef("WheelEvent.deltaY")}} {{ReadOnlyInline}}
+  - : 垂直方向のスクロール量を表す `double` を返します。
+- {{DOMxRef("WheelEvent.deltaZ")}} {{ReadOnlyInline}}
+  - : z 軸のスクロール量を表す `double` を返します。
+- {{DOMxRef("WheelEvent.deltaMode")}} {{ReadOnlyInline}}
+
+  - : `delta*` 値のスクロール量の単位を表す `unsigned long` を返します。指定可能な値は次の通りです。
+
+    | 定数                     | 値  | 説明                                                                                                                                                  |
+    | ---------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+    | `WheelEvent.DOM_DELTA_PIXEL` | `0x00` | `delta*` の値はピクセル単位で指定します。                                                                                                                 |
+    | `WheelEvent.DOM_DELTA_LINE`  | `0x01` | `delta*` 値は行単位で指定します。行の高さを計算するために使用する方法はブラウザーに依存します。 |
+    | `WheelEvent.DOM_DELTA_PAGE`  | `0x02` | `delta*` 値はページ単位で指定します。各マウスクリックはコンテンツのページをスクロールします。                                                                      |
+
+- {{DOMxRef("WheelEvent.wheelDelta")}} {{ReadOnlyInline}} {{deprecated_inline}}
+  - : ピクセル単位で距離を表す整数（32 ビット）を返します。
+- {{DOMxRef("WheelEvent.wheelDeltaX")}} {{ReadOnlyInline}} {{deprecated_inline}}
+  - : 水平スクロール量を表す整数を返します。
+- {{DOMxRef("WheelEvent.wheelDeltaY")}} {{ReadOnlyInline}} {{deprecated_inline}}
+  - : 垂直スクロール量を表す整数を返します。
+
 ## 例
 
 ### ホイールで要素を拡大縮小
 
-この例は、マウス (またはその他のポインティングデバイスの) ホイールを使用して要素を拡大縮小する方法を示します。
+この例は、マウス（またはその他のポインティングデバイスの）ホイールを使用して要素を拡大縮小する方法を示します。
 
 ```html
 <div>Scale me with your mouse wheel.</div>
@@ -68,14 +91,14 @@ function zoom(event) {
   scale += event.deltaY * -0.01;
 
   // Restrict scale
-  scale = Math.min(Math.max(.125, scale), 4);
+  scale = Math.min(Math.max(0.125, scale), 4);
 
   // Apply scale transform
   el.style.transform = `scale(${scale})`;
 }
 
 let scale = 1;
-const el = document.querySelector('div');
+const el = document.querySelector("div");
 el.onwheel = zoom;
 ```
 
@@ -86,7 +109,7 @@ el.onwheel = zoom;
 イベントハンドラーは {{domxref("EventTarget/addEventListener", "addEventListener()")}} メソッドを使用して設定することもできます。
 
 ```js
-el.addEventListener('wheel', zoom);
+el.addEventListener("wheel", zoom, { passive: false });
 ```
 
 ## 仕様書
@@ -100,4 +123,4 @@ el.addEventListener('wheel', zoom);
 ## 関連情報
 
 - {{domxref("WheelEvent")}}
-- [Document: `wheel` イベント](/ja/docs/Web/API/Document/wheel_event)
+- [Document: `wheel` イベント](/ja/docs/Web/API/Element/wheel_event)