JavaScript の scrollIntoView() の解説：例付き

概要：このチュートリアルでは、scrollIntoView()メソッドを使用して要素をビューにスクロールする方法を学びます。

要素のリストがあり、特定の要素を強調表示してビューにスクロールしたいとします。

これを実現するには、element.scrollIntoView()メソッドを使用できます。element.scrollIntoView()は、ブール値またはオブジェクトを受け入れます。

element.scrollIntoView(alignToTop);Code language: JavaScript (javascript)

または

element.scrollIntoView(options);Code language: CSS (css)

このメソッドは、以下の2つの引数のいずれかを受け入れます。

alignToTop

alignToTopはブール値です。

trueに設定されている場合、このメソッドは要素の上部をビューポートの上部、またはスクロール可能な祖先の表示領域の上部に合わせます。

alignToTopがfalseに設定されている場合、このメソッドは要素の下部をビューポートの下部、またはスクロール可能な祖先の表示領域の下部に合わせます。

デフォルトでは、alignToTopはtrueです。

options

options引数は、ビュー内での要素の配置をより詳細に制御できるオブジェクトです。ただし、Webブラウザのサポートは若干異なる場合があります。

optionsオブジェクトには、以下のプロパティがあります。

behaviorプロパティは、トランジションアニメーションを定義します。behaviorプロパティは、autoまたはsmoothの2つの値を受け入れます。デフォルトはautoです。
blockプロパティは、垂直方向の配置を定義します。start、center、end、nearestの4つの値のいずれかを受け入れます。デフォルトはstartです。
inlineプロパティは、水平方向の配置を定義します。start、center、end、nearestの4つの値のいずれかを受け入れます。デフォルトはnearestです。

JavaScript scrollIntoView() の例

プログラミング言語のリストを含むHTMLページがあるとします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS scrollIntoView Demo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <button class="btn">Scroll Into View</button>
        <ul>
            <li>C</li>
            <li>Java</li>
            <li>Python</li>
            <li>C++</li>
            <li>C#</li>
            <li>Go</li>
            <li>Visual Basic</li>
            <li>JavaScript</li>
            <li>PHP</li>
            <li>SQL</li>
            <li>R</li>
            <li>Swift</li>
            <li class="special">JavaScript</li>
            <li>MATLAB</li>
            <li>Assembly language</li>
            <li>Ruby</li>
            <li>PL/SQL</li>
            <li>Classic Visual Basic</li>
            <li>Perl</li>
            <li>Scratch</li>
            <li>Objective-C</li>
        </ul>
    </div>
    <script src="scrollIntoView.js"></script>
</body>
</html>
Code language: HTML, XML (xml)

スクロールしないと、specialというクラスを持つJavaScriptリストアイテムはビューポートに表示されません。「ビューにスクロール」ボタンをクリックすると、JavaScriptリストアイテムがビューにスクロールされます。

let btn = document.querySelector('.btn');
let el = document.querySelector('.special');

btn.addEventListener('click', function () {
    el.scrollIntoView(true);
});
Code language: JavaScript (javascript)

動作方法

最初に、btnクラスを持つボタンとspecialクラスを持つリストアイテムを選択します。
次に、ボタンのクリックイベントにイベントリスナーをアタッチします。
最後に、クリックイベントハンドラーでel.scrollIntoView(true)メソッドを呼び出すことで、JavaScriptリストアイテムをビューポートにスクロールします。

こちらがJavaScript scrollIntoView() のデモです。

JavaScriptリストアイテムをビューの下部に合わせるには、scrollIntoView()メソッドにfalse値を渡します。

let btn = document.querySelector('.btn');
let el = document.querySelector('.special');

btn.addEventListener('click', function() {
    el.scrollIntoView(false);
});Code language: JavaScript (javascript)

このチュートリアルでは、JavaScriptのscrollIntoView()メソッドを使用して要素をビューポートにスクロールする方法を学習しました。

このチュートリアルは役に立ちましたか？