【jQuery】scrollLeft()で左右のスクロール量の取得や設定を行う！
左右のスクロール量の取得や設定を行うにはjQueryのscrollLeft()メソッドを使用します。
jQueryのscrollLeft()メソッドとは左右のスクロール量の取得や設定うメソッドであり、現在のスクロールの位置を取得したり、スクロールの位置を設定して指定した位置へスクロールすることができます。
また、scrollLeft()メソッドを使用することで、 一番左へスクロールする処理を作成することができるため、右から左へ一気にスクロールさせることもできます。
今回は、jQueryのscrollLeft()メソッドを使って左右のスクロール量の取得や設定を行う方法について以下の内容で解説していきます。
⚫︎ 左右のスクロール量を取得する場合
⚫︎ 左右のスクロール量を設定する場合
⚫︎ ページの一番左へスクロールさせる場合
目次
今回はjQueryのscrollLeft()メソッドで左右のスクロール量の取得や設定を行う方法について説明していきます。
お願いします！
scrollLeft()とは
scrollLeft()とは、要素のプロパティ値を取得したり、設定したりするメソッドとなります。
scrollLeft()の書き方
scrollLeft()メソッドの書き方は下記となります。
|
1 |
$("要素").scrollLeft([スクロール位置]); |
scrollLeft()を呼び出すことで左右スクロール量を取得することができます。
また、scrollLeft()の引数にスクロール位置を指定することで、左右スクロール量を設定することができます。
スクロール位置はpx(ピクセル)となります。
左右のスクロール量の取得や設定を行うサンプルコード
要素のプロパティ値の取得や設定を行うサンプルコードを紹介します。
左右のスクロール量を取得する場合
左右のスクロール量を取得するはscrollLeft()の引数を1つ指定します。
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class= "box"> <h2>スクロール量を取得する</h2> <div class= "content"> <p> ビザンティン建築は、東ローマ帝国（ビザンツ帝国、ビザンティン帝国）の勢力下で興った建築様式である。<br> 4世紀頃には帝国の特恵宗教であるキリスト教の儀礼空間を形成し、<br> そのいくつかは大幅な補修を受けているものの今日においても正教会の聖堂、<br> あるいはイスラム教のモスクとして利用されている。<br> 日本では、ビザンツ建築と呼ばれる場合もある。 </p> </div> <button id="btn">現在のスクロール位置を取得</button> </div> <script src="index.js"></script> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#btn { margin-top: 80px; } .box { margin-left: 30px; } .content { width: 250px; height: 150px; overflow-x: auto; white-space: nowrap; background: skyblue; } |
index.js
|
1 2 3 4 5 6 7 8 |
$(function(){ //btnIDのボタンにイベントを割り当て $('#btn').click(function(){ //contentクラスのスクロール位置を読み出す var x = $(".content").scrollLeft(); alert("スクロール量:" +x); }); }); |
出力結果
scrollLeft()を呼び出すことで、スクロール量を取得しています。
そのため、ボタンを押すと、スクロール位置が表示されています。
scrollLeft()を呼び出すことで、スクロール位置を取得することができるのですね！
そうですね。
scrollLeft()を引数無しで呼び出すと、現在のスクロール位置を取得するようになります。
左右のスクロール量を設定する場合
左右のスクロール量を設定する場合はscrollLeft()の引数にスクロール位置を指定します。
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class= "box"> <h2>スクロール量を取得する</h2> <div class= "content"> <p> ビザンティン建築は、東ローマ帝国（ビザンツ帝国、ビザンティン帝国）の勢力下で興った建築様式である。<br> 4世紀頃には帝国の特恵宗教であるキリスト教の儀礼空間を形成し、<br> そのいくつかは大幅な補修を受けているものの今日においても正教会の聖堂、<br> あるいはイスラム教のモスクとして利用されている。<br> 日本では、ビザンツ建築と呼ばれる場合もある。 </p> </div> <button id="btn1">40px位置にスクロール</button> <button id="btn2">240px位置にスクロール</button> </div> <script src="index.js"></script> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#btn1,#btn2{ margin-top: 80px; } .box { margin-left: 30px; } .content { width: 250px; height: 150px; overflow-x: auto; white-space: nowrap; background: skyblue; } |
index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function(){ //btn1IDのボタンにイベントを割り当て $('#btn1').click(function(){ //contentクラスのスクロール位置(40px)を読み出す $(".content").scrollLeft(40); }); //btn2IDのボタンにイベントを割り当て $('#btn2').click(function(){ //contentクラスのスクロール位置(240px)を読み出す $(".content").scrollLeft(240); }); }); |
出力結果
scrollLeft()の引数にスクロール位置を指定することで、左右のスクロール位置を設定することができるのですね！
そうですね。
今回のサンプルコードでは40pxと240pxにX座標へスクロールするようにしています。
ページの一番左へスクロールさせる場合
ページの一番左へスクロールさせる場合はscrollLeft()の引数を0に指定します。
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class= "box"> <h2>スクロール量を取得する</h2> <div class= "content"> <p> ビザンティン建築は、東ローマ帝国（ビザンツ帝国、ビザンティン帝国）の勢力下で興った建築様式である。<br> 4世紀頃には帝国の特恵宗教であるキリスト教の儀礼空間を形成し、<br> そのいくつかは大幅な補修を受けているものの今日においても正教会の聖堂、<br> あるいはイスラム教のモスクとして利用されている。<br> 日本では、ビザンツ建築と呼ばれる場合もある。 </p> </div> <button id="btn">一番左に戻る</button> </div> <script src="index.js"></script> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.box { margin-left: 30px; } .content { width: 250px; height: 150px; overflow-x: auto; white-space: nowrap; background: skyblue; } #btn { margin-top: 80px; } |
index.js
|
1 2 3 4 5 6 7 |
$(function(){ //btnIDのボタンにイベントを割り当て $('#btn').click(function(){ //ページの一番左を読み込む $(".content").scrollLeft(0); }); }); |
出力結果
scrollLeft()の引数を0にすることで、ページの一番左にスクロールさせることができます。
そのため、ボタンを押すと、ページの一番左にスクロールしています。
今回のポイント
scrollLeft()で左右スクロールの量を取得、設定
⚫︎ 左右スクロールの量を取得や設定を行うにはjQueryのscrollLeft()メソッドを使用する
⚫︎ scrollLeft()メソッドで左右スクロールの量を取得するにはscrollLeft()メソッドを呼び出す
⚫︎ scrollLeft()メソッドで左右スクロールの量を設定するにはscrollLeft()メソッドの引数にスクロール値を指定する
⚫︎ scrollLeft()メソッドで一番左へ戻るボタンを作成するにはscrollLeft()メソッドの引数のスクロール値を0にする
関連記事
jQueryのscrollTop()で上下のスクロール量の取得や設定を行う方法についてはこちらをご参考ください。
ST
株式会社flyhawkのSTです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語：swift、JS系(Node.js等)。好きなサーバー：AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。
