CSSのスクロール位置を操作する方法の4回目です。
本日は「4.要素の横スクロール位置（X座標）を設定する」を学びます。
以下のサンプルのラジオボタンを操作することで、横スクロールすることがわかります。
なお、ブラウザの横スクロールも可能だが、このサイトの体裁の都合で省略します。
縦スクロールと同様にブラウザに対する横スクロール位置も設定できますが、
ページの都合により割愛します。
いかがでしたか？
scrollTopメソッドやscrollLeftメソッドによる
スクロール位置の取得・設定方法が分かったと思います。
それでは、また。
本日は「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
横スクロール位置（X座標）: 0px 50px 100px 150px 200px
テストエリア３
【List】
1.ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
2.xxxxx
3.xxxxx
4.xxxxx
5.xxxxx
6.xxxxx
7.xxxxx
8.xxxxx
1.ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
2.xxxxx
3.xxxxx
4.xxxxx
5.xxxxx
6.xxxxx
7.xxxxx
8.xxxxx
scrollLeft: 0
縦スクロールと同様にブラウザに対する横スクロール位置も設定できますが、
ページの都合により割愛します。
いかがでしたか？
scrollTopメソッドやscrollLeftメソッドによる
スクロール位置の取得・設定方法が分かったと思います。
それでは、また。
