Element.scrollLeft

Element.scrollLeft プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。

要素の directionrtl (right-to-left、右書き) の場合、 scrollLeft0 のときにスクロールバーが右端の位置 (スクロールする内容の開始位置) にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。

画面拡大を使用するシステムでは、 scrollLeft が小数になることがあります。

構文

値の取得

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

sLeftelement が左端からスクロールしたピクセル数を整数で表現したものです。

値の設定

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

scrollLeft は任意の整数値で設定することができます。しかし、

  • 要素がスクロールできない場合 (例えば、はみ出した部分がない場合)、 scrollLeft0 に設定されます。
  • 指定された値が 0 より小さかったら (右書きの要素では 0 より大きかったら)、 scrollLeft0 に設定されます。
  • 指定された値が、コンテンツがスクロールできる最大値を超えていたら、 scrollLeft は最大値に設定されます。

HTML

<div id="container">
  <div id="content">ボタンをクリックすると右にスライドします。</div>
</div>

<button id="slide" type="button">右へスライド</button>

CSS

#container {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  overflow-x: scroll;
}

#content {
  width: 250px;
  background-color: #ccc;
}

JavaScript

const button = document.getElementById('slide');

button.onclick = function () {
  document.getElementById('container').scrollLeft += 20;
};

結果

仕様書

仕様書 状態 備考
CSS Object Model (CSSOM) View Module
scrollLeft の定義
草案

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
scrollLeftChrome 完全対応 43
補足
完全対応 43
補足
補足 For right-to-left elements, this property uses 0-100 (most left to most right) instead of negative values. See bug 721759.
Edge 完全対応 12
補足
完全対応 12
補足
補足 From Edge 79, for right-to-left elements, this property uses 0-100 (most left to most right) instead of negative values. See bug 721759.
補足 Before Edge 79, for right-to-left elements, this property uses 100-0 (most left to most right) instead of negative values.
Firefox 完全対応 1IE 完全対応 8
補足
完全対応 8
補足
補足 For right-to-left elements, this property uses 100-0 (most left to most right) instead of negative values.
Opera 完全対応 8Safari 完全対応 6WebView Android 完全対応 43
補足
完全対応 43
補足
補足 For right-to-left elements, this property uses 0-100 (most left to most right) instead of negative values. See bug 721759.
Chrome Android 完全対応 43
補足
完全対応 43
補足
補足 For right-to-left elements, this property uses 0-100 (most left to most right) instead of negative values. See bug 721759.
Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 6Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報