From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/globaleventhandlers/onscroll/index.html | 110 +++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 files/ja/web/api/globaleventhandlers/onscroll/index.html (limited to 'files/ja/web/api/globaleventhandlers/onscroll/index.html') diff --git a/files/ja/web/api/globaleventhandlers/onscroll/index.html b/files/ja/web/api/globaleventhandlers/onscroll/index.html new file mode 100644 index 0000000000..043cd44489 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onscroll/index.html @@ -0,0 +1,110 @@ +--- +title: GlobalEventHandlers.onscroll +slug: Web/API/GlobalEventHandlers/onscroll +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference + - イベントハンドラー + - プロパティ +translation_of: Web/API/GlobalEventHandlers/onscroll +--- +
{{ApiRef("HTML DOM")}}
+ +

onscroll は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 scroll イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。

+ +

scroll イベントは、ユーザー、 Web API、{{glossary("user agent","ユーザーエージェント")}}の何れかによって文書のビューまたは要素がスクロールしたときに発生します。

+ +
+

注: onscroll を {{domxref("GlobalEventHandlers.onwheel", "onwheel")}} と混同しないようにしてください。

+ +

onwheel は一般的なホイールの回転を扱うのに対し、 onscroll はオブジェクトの内容のスクロールを扱います。

+
+ +

構文

+ +
target.onscroll = functionRef
+
+ +

値

+ +
+
functionRef
+
関数名または関数式です。この関数は引数として一つだけ、 {{domxref("UIEvent")}} オブジェクトを受け取ります。
+
+ +

onscroll ハンドラーは同時に1つだけ割り当てることができます。

+ +

柔軟性を高めるために、 {{event("scroll")}} イベントを {{domxref("EventTarget.addEventListener()")}} メソッドに渡すことができます。

+ +

例

+ +

この例では {{HtmlElement("textarea")}} のスクロールを監視し、その結果である要素の垂直のスクロール位置をログ出力します。

+ +

HTML

+ +
<textarea>1 2 3 4 5 6 7 8 9</textarea>
+<p id="log"></p>
+ +

CSS

+ +
textarea {
+  width: 4rem;
+  height: 8rem;
+  font-size: 3rem;
+}
+ +

JavaScript

+ +
const textarea = document.querySelector('textarea');
+const log = document.getElementById('log');
+
+textarea.onscroll = logScroll;
+
+function logScroll(e) {
+  log.textContent = `Scroll position: ${e.target.scrollTop}`;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example", 700, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','#handler-onscroll','onscroll')}}{{Spec2('HTML WHATWG')}}
{{SpecName("DOM3 Events", "#event-type-scroll", "onscroll")}}{{Spec2("DOM3 Events")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onscroll")}}

+ +

関連情報

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