scrollLeft()：スクロールの左横位置を取得する

2016/05/13 2016/05/13

スクロールの左横位置を取得する

スクロールの左横位置を取得するの書式

要素.scrollLeft();

スクロールの左横位置を取得する場合は、要素.scrollLeft()をします。

具体例(スクロールの左横位置を取得するjQueryのサンプルコード)

１．対象となるテストエリアのスクロールイベントが発生した際の処理を設定

２．スクロールイベントの際にはscrollLeftメソッドにて左横位置を取得

３．取得した左横位置をdivタグにて表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
<!--
-->
</style>
<script src="../../js/jquery-1.12.2.min.js"></script>
<script>
$(function(){
  var message;

  // スクロールイベント
  $(".testArea").scroll(function(){
    // scrollLeftメソッドの結果を表示
    message = "scrollLeftメソッドの結果は" + $(this).scrollLeft();
    $("#divMessage").text(message);
  });
});
</script>
</head>
<body>
<textarea name="testArea" class="testArea" wrap=off cols=40 rows=4>
１_１、１_２、１_３、１_４、１_５、１_６、１_７、１_８、１_９、１_１０
２_１、２_２、２_３、２_４、２_５、２_６、２_７、２_８、２_９、２_１０
３_１、３_２、３_３、３_４、３_５、３_６、３_７、３_８、３_９、３_１０
４_１、４_２、４_３、４_４、４_５、４_６、４_７、４_８、４_９、４_１０
５_１、５_２、５_３、５_４、５_５、５_６、５_７、５_８、５_９、５_１０
</textarea>
  <br>
  <br>
  <br>
  <div id = "divMessage"></div>
</body>
</html>