HTML DOM Element scrollTop属性

定義と使用方法

scrollTop 属性は設定または要素の内容の垂直にスクロールしたピクセル数を返します。

も参照してください：

scrollLeft属性

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;

実際に試してみてください

例 5

異なるスクロール位置のクラス名間で切り替え - ユーザーがページのトップから350ピクセル下にスクロールした場合、クラス名 "test" が要素に追加されます（再度上にスクロールすると削除されます）：

window.onscroll = function() {myFunction()};
function myFunction() {
  document.getElementById("myP").className = "test";
    else {
  }
    document.getElementById("myP").className = "";
  }
}

実際に試してみてください

例 6

ユーザーがページのトップから350ピクセル下にスクロールした場合、要素に slideUp クラスを追加します（スライドイン）：

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

実際に試してみてください

文法

scrollTop 属性を返す：

element.scrollTop

scrollTop 属性を設定する：

element.scrollTop = pixels

属性値

値 説明
pixels

要素の内容が垂直にスクロールするピクセル数。

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

返り値

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

ブラウザのサポート

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

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