【HTML】要素がスクロールされたときにスクリプトを実行する方法（onscroll属性の使い方）
Webページでは、要素がスクロールされたタイミングで何らかの処理を実行したいケースがよくあります。そんなときに活躍するのが onscroll 属性（onscrollイベント）です。
要素がスクロールされると、onscroll 属性に設定した処理が自動的に発火します。この記事では、実際に動作するサンプルコードを使って、onscroll属性の基本的な使い方を解説します。
onscroll属性の実装例
以下のサンプルでは、青い枠のボックス内をスクロールすると、テキストの色が青色に変化する仕組みになっています。実際にコードをコピーしてブラウザで開き、ボックスをスクロールしてみてください。
<!DOCTYPE html>
<html>
<head>
<style>
#myid {
width : 250px;
height : 80px;
border : 2px solid blue;
overflow: scroll;
}
</style>
</head>
<body>
<p>ボックスをスクロールしてください。</p>
<div id = "myid" onscroll = "display()">これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
<br><br></div>
<script>
function display() {
document.getElementById("myid").style.color = "blue";
}
</script>
</body>
</html>
コードの解説
このサンプルのポイントは以下の通りです。
- CSS側：
#myidに対してoverflow: scroll;を指定することで、固定サイズのボックス内にスクロールバーを表示させています。 - HTML側：
<div>要素にonscroll = "display()"を設定し、スクロール時にdisplay()関数が呼び出されるようにしています。 - JavaScript側：
display()関数内でdocument.getElementById()を使って対象要素を取得し、文字色を青（blue）に変更しています。
addEventListenerを使った書き方
HTML属性に直接記述する代わりに、JavaScriptの addEventListener() メソッドを使っても同じ動作を実現できます。こちらの方がHTMLとJavaScriptを分離できるため、保守性の高いコードになります。
document.getElementById("myid").addEventListener("scroll", function() {
this.style.color = "blue";
});
onscrollイベントは、無限スクロールやスクロール連動アニメーションなど、さまざまなUI実装の基礎となる重要なイベントです。ぜひ基本的な使い方をマスターしておきましょう。
-
HTMLで要素がクリックされたときにスクリプトを実行する方法（onclick属性の使い方）
HTMLで要素がクリックされたときにスクリプトを実行したい場合は、onclick属性を使用します。この属性をボタンやリンクなどの要素に追加することで、クリックの瞬間に任意のJavaScript関数を呼び出すことができます。onclick属性の基本構文onclick属性には、クリック時に実行したいJavaScriptのコードや関数名を指定します。以下が基本的な書き方です。<要素名 onclick = 実行したい関数名()>テキスト</要素名>実装例以下のコードでは、ボタンがクリックされるとdisplay()関数が呼び出され、指定したidの段落にメッセージが表示されます。実
-
HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法
HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実