From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 files/ja/web/api/document/scroll_event/index.html | 100 ++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 files/ja/web/api/document/scroll_event/index.html

(limited to 'files/ja/web/api/document/scroll_event')

diff --git a/files/ja/web/api/document/scroll_event/index.html b/files/ja/web/api/document/scroll_event/index.html
new file mode 100644
index 0000000000..6be4404386
--- /dev/null
+++ b/files/ja/web/api/document/scroll_event/index.html
@@ -0,0 +1,100 @@
+---
+title: 'Document: scroll event'
+slug: Web/API/Document/scroll_event
+tags:
+  - API
+  - DOM
+  - Document
+  - Event
+  - Reference
+  - Scroll
+  - UIEvent
+translation_of: Web/API/Document/scroll_event
+---
+<p>{{APIRef}}</p>
+
+<p><strong><code>scroll</code></strong> イベントは、ドキュメントのビューまたは要素がスクロールされたときに生じます。</p>
+
+<table class="properties">
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <th>バブリング</th>
+   <td>はい</td>
+  </tr>
+  <tr>
+   <th>キャンセル可能</th>
+   <td>いいえ</td>
+  </tr>
+  <tr>
+   <th>インターフェイス</th>
+   <td>{{DOMxRef("Event")}}</td>
+  </tr>
+  <tr>
+   <th>イベントハンドラープロパティ</th>
+   <td>{{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> iOS UIWebViews では、スクロールされている最中は <code>scroll</code> イベントは生じません。スクロールが完了したあとにのみ生じます。 詳しくは <a href="https://github.com/twbs/bootstrap/issues/16202">Bootstrap issue #16202</a> をご覧ください。 Safari と WKWebViews ではこのバグは起きません。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Scroll_event_throttling" name="Scroll_event_throttling">スクロールイベントを抑制する</h3>
+
+<p><code>scroll</code> イベントは高い確率で生じることができるため、イベントハンドラーは DOM の変更といった計算上の処理コストの高い操作を実行すべきではありません。その代わり、次のように、 {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}} や、 {{DOMxRef("WindowOrWorkerGlobalScope.setTimeout()", "setTimeout()")}} 、または {{DOMxRef("CustomEvent")}} を使ってイベントを抑制することが推奨されます。</p>
+
+<p>ただし、インプットイベントやアニメーションフレームは同じような確率で生じ、そのため下記のような最適化は不要の場合が多いことに注意してください。 この例では <code>requestAnimationFrame</code> の <code>scroll</code> を最適化しています。</p>
+
+<pre class="brush: js notranslate">// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+let last_known_scroll_position = 0;
+let ticking = false;
+
+function doSomething(scroll_pos) {
+  // Do something with the scroll position
+}
+
+window.addEventListener('scroll', function(e) {
+  last_known_scroll_position = window.scrollY;
+
+  if (!ticking) {
+    window.requestAnimationFrame(function() {
+      doSomething(last_known_scroll_position);
+      ticking = false;
+    });
+
+    ticking = true;
+  }
+});</pre>
+
+<p>その他の類似の例を見るには、 <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Document/defaultView/resize_event">resize</a></code> イベントページをご覧ください。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">策定状況</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#scrolling-events')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>{{Compat("api.Document.scroll_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Element/scroll_event">Element: <code>scroll</code> event</a></li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf