document.body.scrollLeft; document.body.scrollTop;
| ブラウザのスクロール量 | |
|---|---|
| scrollLeft； ブラウザ画面,左から | 0 |
| scrollTop； ブラウザ画面,上から | 0 |
マルチドメイン、マルチデータベース、共有 SSL など多彩な機能と
42.195ＧＢの大容量なサーバー環境が月額 1500 円！
ホームページつくるならレンタルサーバー 『ヘテムル』
さくらのマネージドサーバ
サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ブラウザのスクロール量を取得</title>
<script type="text/javascript">
window.onscroll=getsclXY; //onscrollイベントが発生したら、
function getsclXY(){
sclLeft=document.body.scrollLeft || document.documentElement.scrollLeft;
sclTop=document.body.scrollTop || document.documentElement.scrollTop;
document.getElementById("sclL_Val").innerHTML=sclLeft+"px";
document.getElementById("sclT_Val").innerHTML=sclTop+"px";
}
</script>
</head>
<body>
<table border="1" cellpadding="5" style="margin-top : 200px;">
<tr>
<th colspan="2">ブラウザのページのスクロール量</th>
</tr>
<tr>
<td>scrollLeft； ブラウザ画面,左から</td>
<td id="sclL_Val" width="70">0</td>
</tr>
<tr>
<td>scrollTop； ブラウザ画面,上から</td>
<td id="sclT_Val">0</td>
</tr>
</table>
<p style="margin-top : 600px; width : 1500px;">
ブラウザのスクロール量,このサンプルは標準モードのソースコードです。
</p>
</body>
</html>ブラウザのページのスクロール量の取得 （IE7,Mozilla Firefox)
標準モードと互換モードで値を取得するプロパティが異なります。IE7, Firefoxで確認。- 標準モード
scrLeft=document.documentElement.scrollLeft;// 横スクロールの量
scrTop=document.documentElement.scrollTop; // 縦スクロールの量
互換モードでは 0 を返す。- 互換モード
scrLeft=document.body.scrollLeft;// 横スクロールの量
scrTop=document.body.scrollTop; // 縦スクロールの量
標準モードでは 0 を返す。
標準モードと互換モード、両方に対応した値の取得
sclLeft=document.body.scrollLeft || document.documentElement.scrollLeft;
sclTop=document.body.scrollTop || document.documentElement.scrollTopsclLeft には左からのスクロール量
sclTop には上からのスクロール量が "px"単位で入ります。
（参考）標準モードと互換モード , Mozilla's DOCTYPE
heteml
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ
☆ 
マウスカーソル画面上の座標(位置)を検出するスクリプト
オブジェクトの左上を基点としたマウスのX座標、Y座標の取得
画像の重なり順序を変えます。z-index
