HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのonscrollイベント属性とは？使い方とサンプルコードを解説

HTMLのonscrollイベント属性は、HTMLドキュメント内でスクロールバーを使ってHTML要素がスクロールされたときに発火するイベント属性です。ユーザーがスクロール操作を行ったタイミングでJavaScriptを実行したい場合に活用できます。

構文

onscrollイベント属性の基本的な構文は以下のとおりです。

<tagname onscroll="script"></tagname>

onscroll属性には、スクロール時に実行したいJavaScriptのコードまたは関数名を指定します。divやpなど、overflowプロパティでスクロール可能に設定された要素に対して使用できるほか、windowオブジェクト（ページ全体のスクロール）にも利用できます。

使用例

それでは、実際にonscrollイベント属性を使ったサンプルを見てみましょう。この例では、段落要素をスクロールすると文字サイズが大きくなるように実装しています。

コード例

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
        padding: 20px;
    }
    .box-para {
        border: 2px solid #fff;
        padding: 10px;
        width: 200px;
        height: 200px;
        overflow: scroll;
        margin: 1rem auto;
    }
</style>
</head>
<body>
<h1>HTML onscroll Event Attribute Demo</h1>
<p onscroll="scrollFn()" class="box-para">
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text.
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text.
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text.
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text.
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text.
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text.
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text.
This is a paragraph element with some dummy text.</p>
<p>Scroll above paragraph text to increase its font size</p>
<script>
    function scrollFn() {
        document.querySelector(".box-para").style.fontSize = "1.5rem";
    }
</script>
</body>
</html>

コードのポイント

  • 段落要素にoverflow: scroll;を指定し、スクロール可能なボックスを作成しています。
  • pタグにonscroll="scrollFn()"を設定し、スクロール時にscrollFn()関数を呼び出します。
  • 関数内ではdocument.querySelector()で対象要素を取得し、style.fontSizeを変更して文字を大きくしています。

出力結果

上記のコードをブラウザで表示すると、次のような画面になります。

HTMLのonscrollイベント属性とは？使い方とサンプルコードを解説

段落内のテキストをスクロールしてみましょう。onscrollイベントが発火し、文字サイズが大きく変化することが確認できます。

HTMLのonscrollイベント属性とは？使い方とサンプルコードを解説

まとめ

onscrollイベント属性は、要素のスクロール操作を検知してスクリプトを実行できる便利な属性です。無限スクロールやスクロール連動アニメーションなど、動的なWebページの実装にも応用できます。なお、すべての主要ブラウザでサポートされているため、安心して利用できます。

  1. HTMLのondropイベント属性とは？使い方をサンプルコードで解説

    HTMLのondropイベント属性は、ドラッグ可能な要素やテキストが、HTMLドキュメント内の有効なドロップ先（ターゲット）にドロップされた瞬間に発火するイベント属性です。ドラッグ＆ドロップ操作を実装する際には、ondragstartやondragoverなどのイベント属性と組み合わせて使用されるのが一般的です。 構文 ondropイベント属性の基本的な構文は以下の通りです。 <tagname ondrop="script"></tagname> 属性値には、ドロップされたときに実行したいJavaScriptのコードまたは関数名を指定します。 サンプ

  2. HTMLのondragleaveイベント属性とは？使い方とサンプルコードを解説

    HTMLのondragleaveイベント属性は、ドラッグ可能な要素やテキストが、HTMLドキュメント内の有効なドロップターゲット（ドロップ先）から離れた瞬間に発生するイベントです。ドラッグ＆ドロップ操作では、要素がドロップゾーンに入ったときに発生するondragenterと対になるイベントであり、両者を組み合わせることで、ユーザーにとって分かりやすい視覚的フィードバックを実現できます。 構文 ondragleaveイベント属性の基本的な構文は以下のとおりです。 <tagname ondragleave=”script”></tagname>