Web ページを閲覧しているときに要素にスクロールすると、ユーザーの注意が長時間引き付けられ、集中力が維持されます。この機能は、ユーザーがシングル クリックのみを使用してスクロールする必要がある場合、または自動化テストの場合、ページの下部に追加されたコンテンツを即座に確認する必要がある場合に適用できます。このようなシナリオでは、JavaScript の要素までスクロールすると、ユーザーの操作をあまり必要とせずに 1 回のクリックで適用される機能が追加され、時間を節約できます。
このマニュアルでは、JavaScript を使用して要素にスクロールする方法について説明します。
JavaScript を使用して要素にスクロールする方法は?
JavaScript を使用して要素にスクロールするには、以下を利用できます。
-
- 「 scrollIntoView() ' 方法
- 「 スクロール（） ' 方法
- 「 scrollTo() ' 方法
上記のアプローチを 1 つずつ説明します。
方法 1: scrollIntoView() メソッドを使用して JavaScript の要素にスクロールする
「 scrollIntoView() 」メソッドは、要素をドキュメント オブジェクト モデル (DOM) の表示領域にスクロールします。このメソッドを適用して、指定された HTML を取得し、onclick イベントを使用して特定のメソッドをそれに適用できます。
構文
element.scrollIntoView ( 整列する )
指定された構文では、「 整列する 」は整列タイプを示します。
例
次の例では、「」を使用して次の見出しを追加します。 ' 鬼ごっこ：
< h2 > ボタンをクリックして要素までスクロールします。 h2 >
次に、「 オンクリック 「関数を呼び出すイベント」 scrollElement() :
< br >
その後、スクロールするために画像ソースとその ID を指定します。
最後に、「」という名前の関数を定義します scrollElement() 」を使用して必要な要素をフェッチします document.getElementById() 」メソッドを作成し、それに scrollIntoView() メソッドを適用して、画像をスクロールします。
var 要素 = document.getElementById ( 「分割」 ) ;
element.scrollIntoView ( ) ;
}
CSSコード
CSSコードでは、画像ID「 分周 」：
#div{高さ: 800px;
幅: 1200px;
オーバーフロー: 自動;
}
対応する出力は次のようになります。
方法 2: window.scroll() メソッドを使用して JavaScript の要素にスクロールする
「 window.scroll() 」メソッドは、ドキュメント内の座標値に従ってウィンドウをスクロールします。このメソッドを実装して、画像 ID をフェッチし、関数を使用してその座標を設定し、指定された画像をスクロールできます。
構文
window.scroll ( x座標、y座標 )
上記の構文では、「 x 座標 」は X 座標を表し、「 Y座標 」はY座標を示します。
次の例は、前述の概念を説明しています。
例
同じ手順を繰り返して見出しを追加し、ボタンを作成し、onclick イベントを適用して、画像ソースをその ID で指定します。
< h2 > ボタンをクリックして要素までスクロールします。 h2 >< ボタン オンクリック = 「スクロールエレメント()」 > スクロール要素 ボタン >
< br >
< 画像 ソース = 「画像.PNG」 ID = 「分割」 >
次に、「」という名前の関数を定義します scrollElement() 」。ここでは、「 window.scroll() 」という名前の関数にアクセスすることによるメソッド 位置（） 」を取得し、取得した画像要素に適用します。
window.scroll ( 0 、 位置 ( document.getElementById ( 「分割」 ) ) ) ;
}
その後、「」という名前の関数を定義します 位置（） 」 引数として変数 obj を取ります。また、「 オフセット親 静的な位置を持たない最も近い先祖にアクセスし、それを返します。次に、「 上オフセット 親 (offsetParent) に対する最上位の位置を返し、' の値を返す ' プロパティ 現在のトップ 」 追加された条件が true として評価される場合:
ここで、現在のトップ = 0 ;
もしも ( obj.offsetParent ) {
行う {
currenttop += obj.offsetTop;
} その間 ( ( obj = obj.offsetParent ) ) ;
戻る [ 現在のトップ ] ;
}
}
最後に、要件に従って、作成されたコンテナーのスタイルを設定します。
高さ: 1000px;
幅: 1000px;
オーバーフロー: 自動;
}
出力
方法 3: scrollTo() メソッドを使用して JavaScript の要素にスクロールする
「 scrollTo() 」メソッドは、指定されたドキュメントを割り当てられた座標にスクロールします。このメソッドは、ID を使用し、DOM 上の特定の画像をスクロールするために必要な機能を実行することにより、要素を取得するために同様に実装できます。
構文
window.scrollTo ( x と y )
ここ、 ' バツ ' と ' よ 」は、x 座標と y 座標を指します。
次の例を見てください。
例
最初に、上記の手順を繰り返して、見出し、onclick イベントのあるボタン、および画像を次のように追加します。
< h2 > ボタンをクリックして要素までスクロールします。 h2 >< ボタン オンクリック = 「スクロールエレメント()」 > スクロール要素 ボタン >
< br >
< 画像 ソース = 「画像.JPG」 ID = 「分割」 >
次に、「」という名前の関数を定義します scrollElement() scrollTo() メソッドで Position() メソッドを呼び出してスクロールを設定します。
window.scrollTo ( 0 、 位置 ( document.getElementById ( 「分割」 ) ) ) ;
}
最後に、Position() という名前の関数を定義し、指定された画像の座標を設定するために上記の手順を同様に適用します。
ここで、現在のトップ = 0 ;
もしも ( obj.offsetParent ) {
行う {
currenttop += obj.offsetTop;
} その間 ( ( obj = obj.offsetParent ) ) ;
戻る [ 現在のトップ ] ;
}
}
出力
JavaScript を使用して要素にスクロールする便利な方法をすべて説明しました。
結論
JavaScript で要素にスクロールするには、「 scrollIntoView() 要素にアクセスし、指定された機能を適用するためのメソッド、「 window.scroll() 要素をフェッチし、関数を使用してその座標を設定し、画像をスクロールする方法、または「 scrollTo() 」メソッドを使用して要素を取得し、それに応じてスクロールします。このブログでは、JavaScript を使用して要素にスクロールするという概念を示しました。