（jQueryの学習）CSS：スクロール位置を操作する／scrollLeftメソッド／横スクロール位置を設定する

CSSのスクロール位置を操作する方法の4回目です。

本日は「4.要素の横スクロール位置（X座標）を設定する」を学びます。

4.要素の横スクロール位置（X座標）を設定する

4-1.scrollLeftメソッド【返却値(jQueryオブジェクト) = 要素.scrollLeft(数値)】で要素の横スクロール位置（X座標）を設定する

次に要素の横スクロール位置（X座標）を変更します。

以下のサンプルのラジオボタンを操作することで、横スクロールすることがわかります。

なお、ブラウザの横スクロールも可能だが、このサイトの体裁の都合で省略します。

サンプルソース

// HTML
横スクロール位置（X座標）: 
0px<INPUT type="radio" name="y-scroll5-4-1" value="0" checked="checked">
50px<INPUT type="radio" name="y-scroll5-4-1" value="50">
100px<INPUT type="radio" name="y-scroll5-4-1" value="100">
150px<INPUT type="radio" name="y-scroll5-4-1" value="150">
200px<INPUT type="radio" name="y-scroll5-4-1" value="200"><br>
<div class="box-inline">
  <b>テストエリア３</b>
  <div class="box-css-test-area-3">・・・略・・・</div>
  <div>scrollTop: <span id="st">0</span></div>
</div>

// CSS
/* テストエリア３ */
.box-css-test-area-3 {overflow:scroll; background: #F5EEFF; border:5px solid #44f; margin: 5px; padding: 5px; max-height:100px; max-width:200px; float:right;}

// jQuery
$(function() {
  // ラジオボタンの変更イベントに応じて縦スクロール位置を変更する
  $("input[type=radio]").change(function(){
    // 【構文】返却値(jQueryオブジェクト) = 要素.scrollLeft(数値)
    $(".box-css-test-area-3").scrollLeft($("input:radio:checked").val());
  });
  // 変更位置を捉える処理
  $(".box-css-test-area-3").scroll(function(){
    $("span #st").text($(this).scrollLeft());
  });
});

実装例

指定した位置に縦スクロールします。

横スクロール位置（X座標）: 0px 50px 100px 150px 200px

テストエリア３

【List】
1.ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
2.xxxxx
3.xxxxx
4.xxxxx
5.xxxxx
6.xxxxx
7.xxxxx
8.xxxxx

scrollLeft: 0

縦スクロールと同様にブラウザに対する横スクロール位置も設定できますが、
ページの都合により割愛します。

いかがでしたか？
scrollTopメソッドやscrollLeftメソッドによる
スクロール位置の取得・設定方法が分かったと思います。

それでは、また。

• Tweet
• Share
• Share
• Share
• Share