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 | 大阪 ☀ | マウス操作 | このブログの読者になる | 更新情報をチェックする

2009年09月08日

右クリック禁止 onContextmenu イベント

スポンサード リンク


画像を右クリックすると警告をだします。
つまり右クリックで画像をコピーできなくなります。
でもこのような事はしないほうが良いですね!!



★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額263円で容量1GB
Movable TypeやWordpressだって使えるよ。

サンプルソース

<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>右クリック禁止 onContextmenu イベント</title>
</head>
<body>
<img src="画像のURL" onContextmenu="alert('右クリック禁止です。');return false">
</body>
</html>


  onContextmenu // マウスの右ボタンが
押された時に発生するイベントです。
戻り値にfalseを設定して右クリックを
無効にします。

  alert('右クリック禁止です。'); // 警告
ウィンドウを表示します。

  ブラウザー上で右クリックをすると
コンテキストメニューが表示され、
画像の保存やプロパティ情報、ページのソースの
表示やお気に入りに追加などを行うことが
できますが右クリックを禁止することで
コンテキストメニューが表示されなくなります。

  このサンプルでは画像に設定していますが
ページ全体で右クリック禁止をおこなうには
<body>タグに設定します。
<body onContextmenu="alert('右クリック禁止です。');return false">

これがコンテキストメニューです。
Fire fox 3.5.2
コンテキストメニュー

マウス操作
画像にマウスを乗せると説明文を表示します。
ドラッグして画像を移動する。複数画像 Mozilla Firefox対応
posted by javaScript at 20:49 | 大阪 ☁ | マウス操作 | このブログの読者になる | 更新情報をチェックする
×

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