2012年05月12日

ブラウザのスクロール量を取得

スポンサード リンク

document.body.scrollLeft; document.body.scrollTop;

ブラウザのスクロール量
scrollLeft; ブラウザ画面,左から 0
scrollTop; ブラウザ画面,上から 0

マルチドメイン、マルチデータベース、共有 SSL など多彩な機能と
42.195GBの大容量なサーバー環境が月額 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.scrollTop

sclLeft  には左からのスクロール量
sclTop  には上からのスクロール量が "px"単位で入ります。
(参考)標準モードと互換モード , Mozilla's DOCTYPE

heteml
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
マウスカーソル画面上の座標(位置)を検出するスクリプト
オブジェクトの左上を基点としたマウスのX座標、Y座標の取得
画像の重なり順序を変えます。z-index

posted by javaScript at 16:24 | 大阪 ☀ | マウス操作 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。