js STUDIO

.scrollLeft()

現在のスクロールの横位置を取得、またはマッチした要素のスクロールを指定した値の横位置に移動します。

.scrollLeft( ) 1.2.6追加

戻り値:Integer

マッチした最初の要素のスクロールの水平位置を取得します。

この数値はスクロール領域に隠れた長さと同じになります。 また、スクロールが一番左にあるかスクロール領域がない場合、値は0になります。

.scrollLeft( ) 1.2.6追加

戻り値:jQuery

マッチした各要素のスクロールの水平位置を指定します。

引数 説明
value スクロールの新しい水平位置を指定します。

この数値はスクロール領域に隠れるようになる長さと同じです。

補足事項

DIV領域をスクロールさせてボタンを押すと、DIV領域の水平のスクロール位置を取得します。

<!DOCTYPE html>
<html>
<head>
<style>
  div.demo {
  background:#CCCCCC none repeat scroll 0 0;
  border:3px solid #666666;
  margin:5px;
  padding:5px;
  position:relative;
  width:200px;
  height:100px;
  overflow:auto;
  }
  p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input value="スクロール位置取得" type="button" id="get_scroll" />
<span></span>
<div class="demo">
<p>
この領域を横スクロールさせてから、取得ボタンを押してください。
この領域のスクロールの水平位置を出力します。
</p>
</div>
<script>
var div = $("div.demo");
$('#get_scroll').click(function(){
  $("span").text( "scrollLeft:" + div.scrollLeft() );
});
</script>
</body>
</html>

設定ボタンを押すと、スクロールを水平100pxの位置に移動させます。

<!DOCTYPE html>
<html>
<head>
<style>
  div.demo {
  background:#CCCCCC none repeat scroll 0 0;
  border:3px solid #666666;
  margin:5px;
  padding:5px;
  position:relative;
  width:200px;
  height:100px;
  overflow:auto;
  }
  p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input value="スクロール100pxの位置へ設定" type="button" id="set_scroll" />
<span></span>
<div class="demo">
<p>
設定ボタンを押してください。
ボタンが押されるとこの領域のスクロールを水平100pxの位置へ移動します。
</p>
</div>
<script>
var div = $("div.demo");
$('#set_scroll').click(function(){
  div.scrollLeft(100);
});
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM