スクロールトップの使い方_基礎知識

以下のデモでは、外側の要素の高さの値は 200 ピクセル、内側の要素の高さの値は 300 ピクセルです。明らかに、「外側の要素のコンテンツ」は「外側の要素」自体よりも上にあり、スクロールバーを下にドラッグすると、コンテンツの一部が「外側の要素の上部境界」の外側に隠れます。scrollTop は等しいです。この「目に見えないコンテンツ」の高さ。
デモ: (スクロールバーをドラッグすると、scrollTop の値の変化がわかります)
これらのテキストは内部要素に表示されます。
scrollTop の値は次のとおりです:

<div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素"> <div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素"> テキストは内部要素に表示されます。 </div> </div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ]

説明:
Inside レイヤー要素の高さの値は 300px > 外側の要素の高さの値は 200px なので、「外側の要素の内容」(つまり「内側の要素」) を完全に表示することはできません。外側の要素はオーバーフローが auto に設定されているので、外側の要素の右側に上下のスライドバーが表示されます
初期状態では、「内側の要素の上の境界線」と「上の要素の上部の境界線」が表示されます。 「外側の要素の境界」が一致しており、「外側の要素の上の境界」を超える内容がない場合、このときscrollTop属性の値は0となります。
スクロールバーを下にドラッグすると「外側の要素の上端」を超える内容が徐々に増えていき、そのはみ出た部分がscrollTopの値となります。
スクロールバーを下にドラッグすると、「内側要素の下枠」と「外側要素の下枠」が一致し、コンテンツの高さが「外側要素の上枠」を超えます= 300px-200px= 100px、これがこの時点のscrollTopの値です。
js コードを読み取り、scrollTop の値を書き込みます
注:scrollTop の使用法は、element.style.scrollTop ではなく、element.scrollTop です
js コードを介してscrollTop の値を読み取ります
上記ではデモ例では、scrollTop の読み取り操作を実際に使用しています。具体的には、スクロールバーをドラッグしている途中で、そのときのscrollTopの値を読み込んで以下のテキストに表示します。
上記のデモ例の完全なオリジナル コード:

<div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素"> <div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素"> テキストは内部要素に表示されます。 </div> </div> <p>scrollTop の値は次のとおりです: <span id="演示元素scrollTop的值"></span></p>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

説明:
「外側要素のスクロールバー」をドラッグすると、onscrollイベントが発生します。このイベントに名前を付けた、scrollTopの値を読み取って表示するハンドラー関数を登録します
scrollTopの値を読み取って表示するイベントハンドラー関数では、「外側の要素」は外側の要素_div.scrollTopによって取得されます。その時のscrollTopの値がページ上に表示されます。
js コードを使用してscrollTop の値を設定します。
上記のデモ例にいくつかの変更を加えます。関数の追加: js ステートメントでscrollTop の値を設定
例:
これらのテキストは内部要素に表示されます。
scrollTop の値は次のとおりです:
scrollTop を 50 に設定します。scrollTop を 500 に設定します。
scrollTop の値を入力します。OK
上記のデモ例の完全なオリジナル コード:

<div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素A"> <div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素A"> </div> テキストは内部要素に表示されます。 </div> <script type="text/javascript"> var 外层元素_div = document.getElementById("外层元素"); 外层元素_div.onscroll=读取scrollTop的值并显示出来; ////注册onscroll事件处理函数。当拖动滚动条时，会产生onscroll事件 var span_演示元素scrollTop的值 = document.getElementById("演示元素scrollTop的值"); //onscroll事件的处理函数 function 读取scrollTop的值并显示出来() {span_演示元素scrollTop的值.innerHTML=外层元素_div.scrollTop; //读取"外层元素"此时的scrollTop的值并显示出来 } 读取scrollTop的值并显示出来(); //页面加载完成后，执行一次此函数。显示最初的scrollTop值，此时的值为0 </script> <p>scrollTop值是：<span id="外层元素A的scrollTop的值"></span></p> <p><button type="button" onclick="div_外层元素A.scrollTop=50;">把scrollTop设为50</button> <button type="button" onclick="div_外层元素A.scrollTop=500;">把scrollTop设为500</button> </p> <p>输入scrollTop的值:<input type="text" id="输入scrollTop的值" value=""> <button type="button" onclick="设置scrollTop的值()" name="设置scrollTop的值">确定</button> </p> <script type="text/javascript"> var div_外层元素A = document.getElementById("外层元素A"); div_外层元素A.onscroll=读取scrollTop的值并显示出来; //注册onscroll事件处理函数。当拖动滚动条时，会产生onscroll事件 var span_外层元素A的scrollTop的值 = document.getElementById("外层元素A的scrollTop的值"); //onscroll事件的处理函数 function 读取scrollTop的值并显示出来() {span_外层元素A的scrollTop的值.innerHTML=div_外层元素A.scrollTop; //读取"外层元素"此时的scrollTop的值并显示出来 } 读取scrollTop的值并显示出来(); //页面加载完成后，执行一次此函数。显示最初的scrollTop值，此时的值为0 div_外层元素A.scrollTop = 10; //通过js语句来设置scrollTop的值,本条语句会触发onscroll事件，使得"读取scrollTop的值并显示出来"函数执行一次。 function 设置scrollTop的值() { if("" != document.getElementById("输入scrollTop的值").value) div_外层元素A.scrollTop = document.getElementById("输入scrollTop的值").value; else alert("请输入一个数值"); }</script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

解释：
形如div_外层元素A.scrollTop = 12345;的赋值语句会触发onscroll事件，使得读取scrollTop的值并显示出来函数执行一次
上一个例子中已经提到：当拖动滚动条到最底部时，scrollTop=300px-200px=100px，这是scrollTop能够取的最大值。当用更大的值赋给scrollTop时，scrollTop会自动把它转变为100。例如上面的“把scrollTop设为500”按钮，scrollTop会把500转变为100。
得到body元素的scrollTop
body元素的scrollTop是超出“浏览器窗口上边界”的内容的高度
当html文档头部包含有“文档类型声明”时，需要用document.documentElement.scrollTop获得正确的值，而document.body.scrollTop的值为0

复制代码 代码如下:

当html文档头部不包含任何“文档类型声明”时，需要用document.body.scrollTop获得正确的值，而document.documentElement.scrollTop的值为0
下面定义的get_scrollTop_of_body()方法可以处理这种差异

复制代码 代码如下:

function get_scrollTop_of_body(){
var scrollTop;
if(typeof window.pageYOffset != 'undefined'){
scrollTop = window.pageYOffset;
}
else
if(typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat'){
scrollTop = document.documentElement.scrollTop;
}
else
if(typeof document.body != 'undefined'){
scrollTop = document.body.scrollTop;
}
return scrollTop;
}