scrollTopとは
- ここで説明するscrollTop とは次の語句からなるjavascriptのプロパティです。
- scroll
- 読み: スクロール
意味: 巻物、ディスプレーに映っている文字列や図形を上下左右に移動させること - top
- 読み: トップ
意味: 最上位、最初、1番目、首位
scrollTopプロパティの概要
このプロパティは、要素の内容が垂直にスクロールした値をピクセル値で取得、設定します。
取得、設定する値は整数値であり、単位は付きませんがピクセル単位だということに注意してください。
また、ルート要素(html要素)のscrollTopを取得した場合、ウィンドウのscrollYの値を得ることができます。
構文
サンプルを見る前に構文を確認しておきます。
var intScrollTop = Element.scrollTop;
Element.scrollTop = intScrollTop;
サンプルコードと実行結果
このサンプルではdiv要素のコンテンツに収まらないテキストをスクロールバーを使って表示できるようにしています。 この要素のスクロールバーをユーザーが操作したときに縦軸のスクロール位置を取得し、結果欄に表示します。
ここでは値の取得しか行っていませんが、プロパティに値を代入することでスクロール位置を変更することも可能です。
サンプルコード: CSS
<style>
#idDiv{
border: medium solid currentColor;
background-color: ##ivory;
padding: 1em;
width: 100px;
height: 100px;
overflow: scroll;
overflow-x: visible;
}
</style>
- 08: overflow (コンテンツが溢れる場合には、スクロールバーを表示します。)
サンプルコード: HTML
<body>
<div id="idDiv">
Welcome.
Thank you for visiting ywork.
We look forward to working with you in the future.
</div>
結果:<br>
<output id="idOutput">innerText</output>
</body>
- 02-06: div (この要素の縦スクロールの位置を取得します。)
- 08: output (この要素に縦スクロール位置の結果を表示します。)
サンプルコード: script
<script>
let elmDiv = document.getElementById("idDiv");
let elmOutput = document.getElementById("idOutput");
elmDiv.addEventListener("scroll", function(){
elmOutput.innerText = elmDiv.scrollTop;
});
</script>
- 04: スクロールイベント (div要素でスクロールが行われたら関数を実行します。)
- 05: 関数の処理 (div要素のスクロール位置をoutput要素のコンテンツに表示します。)
サンプル要素:
Welcome.
Thank you for visiting ywork.
We look forward to working with you in the future.
結果: