スクロールトップの使い方_基礎知識-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 18:52:09

オリジナル

1222 人が閲覧しました

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

[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の値を読み込んで以下のテキストに表示します。
上記のデモ例の完全なオリジナルコード:

[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; 
}