HTML DOM Element scrollLeft属性

定義と用法

scrollLeft 属性を設定または返します。要素の内容が水平にスクロールするピクセル数です。

参照も：

scrollTop属性

CSS overflow プロパティ

onscroll イベント

例

例1

"myDIV"の内容のスクロールピクセル数を取得します：

const element = document.getElementById("myDIV");
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;

自分で試してみてください

例2

"myDIV"の内容を水平に50ピクセル、垂直に10ピクセルにスクロールします：

const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;

自分で試してみてください

例3

"myDIV"の内容を水平に50ピクセル、垂直に10ピクセルスクロールします：

const element = document.getElementById("myDIV");
element.scrollLeft += 50;
element.scrollTop += 10;

自分で試してみてください

例4

<body>の内容を水平に30ピクセル、垂直に10ピクセルスクロールします：

const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;

自分で試してみてください

文法

scrollLeft属性を返します：

element.scrollLeft

scrollLeft属性を設定します：

element.scrollLeft = pixels

属性値

値 説明
pixels

要素の内容が水平にスクロールするピクセル数です。

  • この数字が負の数の場合、この数字は0に設定されます。
  • 要素がスクロールできない場合、この数字は0に設定されます。
  • この数が許可されている最大値を超えた場合、この数は最大値に設定されます。

返り値

タイプ 説明
数字 要素の内容が水平にスクロールするピクセル数です。

ブラウザのサポート

すべてのブラウザがサポートしています。 element.scrollLeft：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート サポート サポート サポート サポート サポート