js STUDIO

.scrollLeft

Element.scrollLeftプロパティは、要素の内容が左にスクロールされているピクセル数を取得または設定します。 もし、要素の方向が'rtl'(右から左)である場合、スクロールバーが右端の位置(スクロール開始位置)でscrollLeftは0になり、 コンテンツ内容の終端に向かってスクロールすると、マイナスの値が加算されていきます。

文法 

// スクロールしたピクセル数を取得
var sLeft = element.scrollLeft;

sLeftには、要素が左にスクロールされたピクセル数が数値として格納されます。 

// スクロールされたピクセル数を設定します。
element.scrollLeft = 10;

scrollLeftには、数値を設定可能ですが、

  • もし、要素がスクロール出来なければ、(例えば、overflowではない)、scrollLeftには0が設定されます。
  • もし、0より少ない値が指定されると、scrollLeftには0が設定されます。
  • もし、スクロール可能な最大値より大きい値が指定されると、scrollLeftには最大値が設定されます。

例 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  #container {
    border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
  }
  #content {
    background-color: #ccc; width: 250px;
  }
</style>
</head>
<body>
  <div id="container">
    <div id="content">横スクロールのテストです。</div>
  </div>
  <button id="slide" type="button">Slide</button>
<script>
  var button = document.getElementById('slide');
  button.onclick = function () {
    document.getElementById('container').scrollLeft += 20;
  };
</script>
</body>
</html>

注意事項

DOMレベル0。どの標準にも属しません。

関連項目

scrollLeft property (Internet Explorer)

 Back to top

© 2017 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。 構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 特定のブラウザに特化しすぎている情報やあまりにも古い情報、 または試験的に導入されているようなAPIや機能については、省略していることがあります。
  • 例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、 その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
  • MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。