English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

jQuery scrollLeft() メソッド

jQuery HTML/CSS メソッド

scrollLeft()メソッドは、選択された要素の水平スクロールバーの位置を取得または設定します。

scrollLeft()メソッドを使用する場合取得位置を設定した場合、それは最初の選択された要素のスクロールバーの水平位置。

scrollLeft()メソッドを使用する場合設定位置を設定した場合、それはすべての選択された要素スクロールバーの水平位置を設定。

文法:

水平スクロールバーの位置を取得:

$(selector).scrollLeft()

水平スクロールバーの位置を設定:

$(selector).scrollLeft(value)

DIVのscrollLeftを取得:

$("div").scroll(function(){
  $(this).scrollLeft();
});
テストを見て‹/›

DIVのscrollLeftを設定:

$("button").click(function(){
  $("div").scrollLeft(150);
});
テストを見て‹/›

ドキュメントのscrollLeftを設定

$("button").click(function(){
  $(document).scrollLeft(300);
});
テストを見て‹/›

ユーザーがページをスクロールしたときにスムーズなスクロールを追加

let size = $(".main").outerWidth(); // ".main"の幅を取得
$(window).keydown(function(event) {
  if(event.which === 39) { // 右矢印キーが押された場合
    $("html, body").animate({scrollLeft: "+=" + size}, 250);
  } else if(event.which === 37) { // 左矢印キーが押された場合
    $("html, body").animate({scrollLeft: "-=" + size}, 250);
  }
});
テストを見て‹/›

パラメータ値

パラメータ説明
value新しいスクロール位置を設定するための整数

jQuery HTML/CSS メソッド