最新のWeb開発のチュートリアル
 

HTML DOM scrollTop Propery

<Elementオブジェクト

例

コンテンツの画素数を取得する<div>要素は、水平方向と垂直方向にスクロールされます。

var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
»それを自分で試してみてください

もっと"Try it Yourself"以下の例。

定義と使用法

scrollTopスプライトプロパティセットまたは要素の内容を上下にスクロールされる画素の数を返します。

ヒント：使用scrollLeftのセットまたは要素のコンテンツが水平方向にスクロールされたピクセルの数を返すようにプロパティを。

ヒント：CSSの使用、要素にスクロールバーを追加するには、オーバーフロープロパティを。

ヒント： onscroll要素のスクロールバーがスクロールされたときにイベントが発生します。

ブラウザのサポート

プロパティ
scrollTop はい はい はい はい はい

構文

scrollTopスプライトプロパティを返します：

element .scrollTop

scrollTopスプライトプロパティを設定します。

element .scrollTop= pixels

プロパティ値

値 説明
pixels 要素の内容を上下にスクロールされたピクセルの数を指定します。

特記事項：
  • 数が負の値であれば、数は次のように設定された"0"
  • 要素がスクロールすることができない場合は、番号がに設定されている"0"
  • 数が最大許容スクロール量よりも大きい場合、数が最大数に設定されています

技術的な詳細

戻り値： 要素の内容が垂直スクロールされたピクセルの数を表す数値、
例

その他の例

例

内容スクロール<div>垂直方向、水平方向50個の画素、10個の画素に要素を：

var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft = 50;
elmnt.scrollTop = 10;
»それを自分で試してみてください

例

内容スクロール<div>垂直方向、水平方向50個の画素、10個の画素で要素を：

var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft += 50;
elmnt.scrollTop += 10;
»それを自分で試してみてください

例

内容スクロール<body>垂直、水平30個の画素、10個の画素で：

var body = document.body; // For Chrome, Safari and Opera
var html = document.documentElement; // Firefox and IE places the overflow at the <html> level, unless else is specified. Therefore, we use the documentElement property for these two browsers
body.scrollLeft += 30;
body.scrollTop += 10;
html.scrollLeft += 30;
html.scrollTop += 10;
»それを自分で試してみてください

例

異なるスクロール位置にクラス名を切り替える-場合ダウン50個のピクセルページの先頭からユーザがスクロール、クラス名"test"エレメントに追加され(and removed when scrolled up again) 。

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("myP").className = "test";
    } else {
        document.getElementById("myP").className = "";
    }
}
»それを自分で試してみてください

例

ユーザーがページの先頭から350個のピクセルをスクロールダウンしたときに素子にスライド(add the slideUp class) 。

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
        document.getElementById("myImg").className = "slideUp";
}
»それを自分で試してみてください

例

スクロールの三角形を描きます。

<!-- Use SVG to draw the triangle (has to be <path>) -->
<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z">
</svg>

<script>
// Get the id of the <path> element and the length of <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();

// The start position of the drawing
triangle.style.strokeDasharray = length;

// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.style.strokeDashoffset = length;

// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);

function myFunction() {
    var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

    var draw = length * scrollpercent;

    // Reverse the drawing (when scrolling upwards)
    triangle.style.strokeDashoffset = length - draw;
}
</script>
»それを自分で試してみてください

<Elementオブジェクト