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

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

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

3.要素の横スクロール位置（X座標）を取得する

3-1.scrollLeftメソッド【返却値(数値) = 要素.scrollLeft( )】で1つの要素の横スクロール位置（X座標）を取得する

要素の横スクロール位置（X座標）を取得するためにはscrollLeftメソッドを利用します。

スクロールバーを左右に動かしたときの対象要素に対する横位置（X座標）が取得できます。

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

サンプルソース

// HTML
<div class="box-inline">
  <b>テストエリア３</b>
  <div class="box-css-test-area-3">・・・略・・・</div>
  <div>scrollLeft: <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() {
  // サンプル：「テストエリア３」の横スクロール位置（X座標）を取得する
  $(".box-css-test-area-3").scroll(function(){  // スクロールイベントを捕捉
    // 【構文】返却値(数値) = 要素.scrollLeft()
    var st = $(this).scrollLeft();
    // スクロール位置をセット
    $("span #st").text(st);
  });
});

実装例

要素の横スクロール位置（X座標）を取得します。

テストエリア３

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

scrollLeft: 0

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

いかがでしたか？
次回は「4.要素の横スクロール位置（X座標）を設定する」を学びます。

それでは、また。

• Tweet
• Share
• Share
• Share
• Share