jQuery入門 | 要素の領域 | 要素のスクロール位置 .scrollLeft() .scrollTop()

Tags:

要素のスクロール位置

jQueryには、選択した要素のスクロール位置を簡単に取得したり設定したりできるメソッドが用意されている。

メソッド 説明
.scrollLeft() 選択した要素集合の最初の要素について、水平スクロールバーの位置を取得する。または、選択した要素の水平スクロールバーの位置を引数で渡された値に設定する。
.scrollTop() 選択した要素集合の最初の要素について、垂直スクロールバーの位置を取得する。または、選択した要素の垂直スクロールバーの位置を引数で渡された値に設定する。

.scrollLeft()メソッドと.scrollTop()メソッド

.scrollLeft()メソッドは、選択した要素の水平スクロールバーの現在位置を返すか、その要素の水平スクロールバーの位置を設定する。.scrollTop()メソッドは、選択した要素の垂直スクロールバーの現在位置を返すか、その要素の垂直スクロールバーの位置を設定する。

次の例は、選択した要素のスクロールバーの位置を返す例である。

$("button").on("click", function(){
  var left = $(".box").scrollLeft();
  var top = $(".box").scrollTop();
  $("span").text("Left:" + left + ", Top" + top);
});

コードを実行

次の例は、選択した要素のスクロールバーの位置を設定する例である。

$("button").on("click", function(){
  $(".box").scrollLeft(70);
  $(".box").scrollTop(20);

  var left = $(".box").scrollLeft();
  var top = $(".box").scrollTop();
  $("span").text("Left:" + left + ", Top" + top);
});

コードを実行

スクロールバーの位置情報をリアルタイムで取得する

.on('scroll', function(){...})メソッドを使うと、スクロールバーの位置情報をリアルタイムで取得できる。

次の例は、選択した要素のスクロールバーの位置情報をリアルタイムで取得する例である。

$(".box").on('scroll', function(){
    var left = $(this).scrollLeft();
    var top = $(this).scrollTop();
    $("span").text("Left:" + left + ", Top" + top);
});

コードを実行