TOPページ >  ウィンドウを開く、閉じる、制御する > ウィンドウをスクロールさせて表示する

ウィンドウをスクロールさせて表示する

簡単な JavaScript を使って、ウィンドウの表示内容をスクロールさせることができます。

※このサンプルは、インラインフレームで別ページをブログに埋め込んであります。

ページのスクロールに関連する JavaScript のメソッドおよびプロパティは、下記のようになります。

ウィンドウ名.scroll( X座標,Y座標 ) 指定位置にスクロールする
ウィンドウ名.scrollTo( X座標,Y座標 ) 指定位置にスクロールする
ウィンドウ名.scrollBy( X方向の移動量,Y方向の移動量 ) 相対位置にスクロールする
ウィンドウ名.pageXOffset 横方向のオフセットを参照
ウィンドウ名.pageYOffset 縦方向のオフセットを参照
  1. ウィンドウ名:スクロールさせるウィンドウの名前を指定します。省略可能です。
  2. X座標/Y座標: scroll メソッドおよび scrollTo メソッドは、ここで指定した座標位置にスクロールしてページ内容を表示します。
  3. X方向の移動量/Y方向の移動量: scrollBy メソッドは、現在の表示開始位置から、ここで指定した移動量だけ軽視位置を移動させます。値は、ピクセル値です。
    負数(マイナスの値)を指定すると、逆方向に移動します。ただし、ページのサイズを超えた値を指定すると無効になりますので、スクロールバーで移動できる範囲を指定する必要があります。
  4. pageXOffset/pageYOffset: このプロパティは、現在の表示開始位置を返しますので、どの位置までスクロールされているか調べたいときに使用します。

このサンプルページのソースは、下記のようになります。

<html>
<head>
<title>ブログでもだいたい使えるHTMLタグ リファレンス-動物大好き-</title>

<SCRIPT LANGUAGE="JavaScript">
<!--
count = 0 ;scrly = 5 ;scrollStart() ; //初期値を指定してタイマー関数を呼び出します

function scrollStart() {
CountTimer = setInterval( "scroll()", 50 ); }
 //50ミリ秒ごとにスクロールのための関数を呼び出します
function scroll() {
if ( count < 124 ) { scrollBy( 0 , scrly ) ; count++ ; }
else { clearInterval( CountTimer ) ; //指定回数スクロールしたらタイマーを解除し、スクロール量の正負を反転させて再びタイマー関数を呼び出します
count = 0 ; scrly = 0 - scrly ;
scrollStart() ; }
}
//-->
</SCRIPT>

<style type="text/css">
<!--
body { margin:0;padding:2.5px 0;background-color:#8BB97F; }
img { width:200px; height:150px; margin:2.5px 5px; }
-->
</style>
</head>

<body>
<img src="Pteromys_volans.jpg"><br>
<img src="Hologale_parvula.jpg"><br>
<img src="Sciurus_lis.jpg"><br>
<img src="Phascolarctos_cinereus.jpg"><br>
<img src="Callosciurus_prevosti.jpg">
</body>
</html>

本サンプルは、この別ページをインラインフレームでブログ内に表示しています。ソースは、次のようになっています。

※このサンプルは、インラインフレームで別ページをブログに埋め込んであります。
<iframe src="sample/animals/animals.html" scrolling="no" frameborder="no" width="210" height="160">
このページは、インラインフレームを使用しています。<br>
→<a href="sample/animals/animasl.html" target="_blank">こちらからどうぞ</a>
</iframe>

タイマー関数について詳細はこちらから。→JavaScriptを使ってクッキングタイマーを作る
インラインフレームについて詳細はこちらから。→インラインフレームを表示する

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
一定時間後に自動でウィンドウを閉じる
ウィンドウをスクロールさせて表示する
確認メッセージを表示する
警告メッセージを表示する
ウィンドウのステータスバーに文字列を表示する
JavaScriptを使って別ウィンドウの表示内容を操作する
window.open() のスタイル指定一覧
ウィンドウのサイズ変更を禁止する
ウィンドウの位置や大きさを指定する
ポップアップウィンドウを開く
メニューバーやスクロールバーの有無を指定する
大きさを指定してウィンドウを開く
ウィンドウを閉じる
ウィンドウを開く
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス