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

今回からはCSSのスクロール位置を操作する方法を学びます。
以下、4つのカテゴリに分けて見ていきます。

1. 要素の縦スクロール位置（Y座標）を取得する
2. 要素の縦スクロール位置（Y座標）を設定する
3. 要素の横スクロール位置（X座標）を取得する
4. 要素の横スクロール位置（X座標）を設定する

ここではjQueryにて要素に対する、スクロール位置の操作方法を整理します。

スクロール位置を操作するには、
縦スクロール（Y座標）に対しては「scrollTopメソッド」、
横スクロール（X座標）に対しては「scrollLeftメソッド」を利用する必要があります。
メソッドの種類は以下の通り。

■要素の縦スクロール（Y座標）を取得する
　・返却値（数値）＝要素．scrollTop（）　※ver1.2.6～
■要素の縦スクロール（Y座標）を設定する
　・返却値（jQueryオブジェクト）＝要素．scrollTop（数値）　※ver1.2.6～
■要素の横スクロール（X座標）を取得する
　・返却値（数値）＝要素．scrollLeft（）　※ver1.2.6～
■要素の横スクロール（X座標）を設定する
　・返却値（jQueryオブジェクト）＝要素．scrollLeft（数値）　※ver1.2.6～

これらのメソッドを使うことで、要素のいろいろなスクロール位置が取得ができるようになります。

それでは本日は「1.要素の縦スクロール位置（Y座標）を取得する」を学びます。

まずは要素に対する縦スクロール位置を取得します。

1.要素の縦スクロール位置（Y座標）を取得する

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

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

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

サンプルソース

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

実装例

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

テストエリア３

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

scrollTop: 0

次回はブラウザに対する縦スクロール位置を取得する方法を学びます。

それでは、また。

• Tweet
• Share
• Share
• Share
• Share