ページスクローラー
ver.1.3
　
　◆サンプル

　サンプルはこちらをクリック
 
　 　 ＜機能と特徴＞
　
・スクロールバーを使わずにページを
　スクロールさせる事が出来ます

・スクロールバーを表示させたくない
　フレームページなどにお勧め
 



 


公開日 2003.2.1
最終更新日 2004.3.15
バージョン ver.1.3
動作確認 IE6.0,NN4.7,NN7.1,Opera7.2
cookie 不使用
CSS 不使用
更新履歴 2003.7.20 ver1.1 余白の設定を追加(変更点：ソース１)
2003.8.30 ver1.2 スクロールボタンが消えない点を修正(変更点：ソース１)
Operaでの不具合を修正(変更点：ソース１)
2004.3.15 ver.1.3 ボタンの表示位置を修正(変更点：ソース１) ボタンのスタイルをCSS構文で指定可能に修正(変更点：ソース１)
 

☆★☆使い方☆★☆
 
 初心者向け解説   中級者向け解説   ダウンロード 

１．カスタマイズフォームを使って設定をしてください。

２．ソース１を<head>〜</head>の間に書き込んでください。

３．ソース２を<body>の直後に書き込んでください。

４．ソース３を</body>の直前に書き込んでください。

５．ブラウザでテストしてみてください。
　　正常に動作すれば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 

１．ソース１を<head>〜</head>の間に書き込んでください。

２．ソース２を<body>の直後に書き込んでください。

３．ソース３を</body>の直前に書き込んでください。

４．ブラウザでテストしてみてください。
　　正常に動作すれば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 
 
■ダウンロードする形式を選択してください。

  【スクリプトを１つのページに組み込む】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。

２．右のボタンを押してファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は一括)】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。

２．右のボタンを押して外部ファイルをダウンロードしてください。
 
３．保存した外部ファイルのファイル名を入力してください。
　　 (ファイルのパスでも可)
 
４．右のボタンを押してHTMLファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は各ページ毎)】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。
 
２．右のボタンを押して外部ファイルをダウンロードしてください。
 
３．保存した外部ファイルのファイル名を入力してください。
　　 (ファイルのパスでも可)
 
４．右のボタンを押してHTMLファイルをダウンロードしてください。
 
５．複数のページが必要な場合は、カスタマイズフォームで設定をし
　　再度HTMLファイルのみダウンロードしてください。
 

 
 
 
 カスタマイズフォーム   補足説明   改造方法 
 
スクロールの速度： (半角数字：正の整数)
 【スクロールさせる文字の設定】 
表示する文字(上)： (タグ可)
表示する文字(下)： (タグ可)
表示する文字(左)： (タグ可)
表示する文字(右)： (タグ可)
文字色： (RGB値,色名)
背景色： (RGB値,色名)
太字設定： 　
文字サイズ： (半角数字：正の整数)
その他のスタイル： (CSS構文)
ボタン化の有無： 　
上の余白： (半角数字：正の整数)
右の余白： (半角数字：正の整数)
下の余白： (半角数字：正の整数)
左の余白： (半角数字：正の整数)
　
 カスタマイズフォーム   補足説明   改造方法 
 
■特にありません。
 
 カスタマイズフォーム   補足説明   改造方法 
 

■スクロール速度を変更する。(半角数字：正の整数)

　//設定〜//ここまでの１行目を変更してください。 
p_sokudo  = '27';
■スクロールさせる文字を変更する。

　//設定〜//ここまでの４〜７行目を変更してください。
　上から、上、下、左、右の順に並んでいます。
　画像などのタグも使えます。 
p_ue      = '↑';
p_shita   = '↓';
p_hidari  = '←';
p_migi    = '→';
■スクロールさせる文字のスタイルを変更する。(CSS構文)

　//設定〜//ここまでの８〜１１行目を変更してください。
　上から、文字色、背景色、太字か通常かの順に並んでいます。
　１０行目は、太字にするならbold、通常ならnomalを設定してください。 
p_color   = '#ffffff';      //文字色
p_bgcolor = '#9999ff';      //背景色
p_weight  = 'bold';         //太字設定
p_size    = '12px';         //文字サイズ
■それ以外のスタイルを変更する。(CSS構文)

　//設定〜//ここまでの１２行目を変更してください。
p_size    = 'padding:0px;'; //その他のスタイル
■スクロールさせる文字をボタン化しない。

　//設定〜//ここまでの１３行目を変更してください。
　ボタン化するならyes、ボタン化しないならnoを指定します。
　(netscape4では設定に関わらずボタン化されません。) 
p_button  = 'no';
■ボタンの表示位置を調節する。(半角数字：正の整数)

　//設定〜//ここまでの１６〜１９行目を変更してください。
　上から上、右、下、左からの余白と並んでいます。 
p_margin1 = '0';
p_margin2 = '0';
p_margin3 = '0';
p_margin4 = '0';
 
 
  

■ソース１(以下のソースを<head>〜</head>の間に書き込んでください)  
  
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
    //ver.1.3


//設定
p_sokudo  = '27'; //スクロールの速度


//スクロールさせる文字の設定
p_ue      = '↑';           //表示する文字(上)
p_shita   = '↓';           //表示する文字(下)
p_hidari  = '←';           //表示する文字(左)
p_migi    = '→';           //表示する文字(右)
p_color   = '#ffffff';      //文字色
p_bgcolor = '#9999ff';      //背景色
p_weight  = 'bold';         //太字設定
p_size    = '12px';         //文字サイズ
p_style   = 'padding:0px;'; //その他のスタイル
p_button  = 'yes';          //ボタン化の有無


//ボタンの位置調節
p_margin1 = '0'; //上の余白
p_margin2 = '0'; //右の余白
p_margin3 = '0'; //下の余白
p_margin4 = '0'; //左の余白
//ここまで


p_id     = "";
p_temp1  = 0
p_nn6    = 0
p_obj    = new Array();


function page_scroll_write()
{with(document)
 if(document.all)
 {with(all("p_layer"))
  {p_width   = offsetWidth;
   p_height  = offsetHeight;
   p_left    = offsetLeft;
   p_top     = offsetTop;
   p_width2  = body.offsetWidth  - p_left;
   p_height2 = body.offsetHeight - p_top;
   p_width3  = body.offsetWidth;
   p_height3 = body.offsetHeight;
   style.width  = p_width2;
   style.height = p_height2;
   style.top = p_top;
   style.left= p_left;}
  if(!document.all("p_layer1"))
  {page_scroll_write2();}}
 else if(document.getElementById)
 {with(getElementById("p_layer"))
  {p_width   = offsetWidth;
   p_height  = offsetHeight;
   p_left    = offsetLeft;
   p_top     = offsetTop;
   p_width2  = self.innerWidth  - p_left;
   p_height2 = self.innerHeight - p_top;
   style.top = p_top;
   style.left= p_left;}
  with(getElementsByTagName("body")[0])
  {style.margin = 0;
   if(navigator.userAgent.indexOf("Netscape6") != -1)
   {p_nn6 = 14;
    style.width  = self.innerWidth;
    style.height = self.innerHeight-p_nn6;}}
  page_scroll_write2();}
 else if(document.layers)
 {with(layers["p_layer"])
  {p_width     = clip.width;
   p_height    = clip.height;
   p_left      = pageX;
   p_top       = pageY;
   p_width2    = self.innerWidth  - p_left;
   p_height2   = self.innerHeight - p_top;
   clip.width  = p_width2;
   clip.height = p_height2;}
  if(!document.layers["p_layer1"])
  {page_scroll_write2();}}
 setTimeout('page_scroll_positioning()',100);}


function page_scroll_rewrite()
{with(document)
 if(document.all)
 {with(all("p_layer"))
  {p_width2  = body.offsetWidth  - p_left;
   p_height2 = body.offsetHeight - p_top;}}
 else if(document.getElementById)
 {with(getElementById("p_layer"))
  {p_width2  = self.innerWidth  - p_left;
   p_height2 = self.innerHeight - p_top;}}
 else if(document.layers)
 {with(layers["p_layer"])
  {p_width2    = self.innerWidth  - p_left;
   p_height2   = self.innerHeight - p_top;
   clip.width  = p_width2;
   clip.height = p_height2;}}
 setTimeout('page_scroll_positioning()',100);}


function page_scroll_positioning()
{with(document)
 {if(document.all)
  {p_temp2 = 0;
   p_temp3 = 0;
   if(p_height > p_height2)
   {p_temp2 = all("p_layer2").offsetHeight;}
   if(p_width > p_width2)
   {p_temp3 = all("p_layer3").offsetWidth;}
   p_scrollX = body.scrollLeft;
   p_scrollY = body.scrollTop;
   if(p_height > p_height2)
   {all("p_layer1").style.top  = p_scrollY+p_margin1;
    all("p_layer1").style.left = body.clientWidth-all("p_layer1").offsetWidth+p_scrollX-p_margin2;
    all("p_layer2").style.top  = body.clientHeight-all("p_layer2").offsetHeight-p_temp3+p_scrollY-p_margin3;
    all("p_layer2").style.left = body.clientWidth-all("p_layer2").offsetWidth+p_scrollX-p_margin2;
    all("p_layer1").style.visibility = "visible";
    all("p_layer2").style.visibility = "visible";
    p_obj[1] = all("p_layer1");
    p_obj[2] = all("p_layer2");}
   else
   {all("p_layer1").style.visibility = "hidden";
    all("p_layer2").style.visibility = "hidden";}
   if(p_width > p_width2)
   {all("p_layer3").style.top  = body.clientHeight-all("p_layer3").offsetHeight+p_scrollY-p_margin3;
    all("p_layer3").style.left = body.clientWidth-all("p_layer3").offsetWidth-p_temp2+p_scrollX-p_margin2;
    all("p_layer4").style.top  = body.clientHeight-all("p_layer4").offsetHeight+p_scrollY-p_margin3;
    all("p_layer4").style.left = p_scrollX+p_margin4;
    all("p_layer3").style.visibility = "visible";
    all("p_layer4").style.visibility = "visible";
    p_obj[3] = all("p_layer3");
    p_obj[4] = all("p_layer4");}
   else
   {all("p_layer3").style.visibility = "hidden";
    all("p_layer4").style.visibility = "hidden";}}
  else if(document.getElementById)
  {p_temp2 = 0;
   p_temp3 = 0;
   if(p_height > p_height2)
   {p_temp2 = getElementById("p_layer2").offsetHeight;}
   if(p_width > p_width2)
   {p_temp3 = getElementById("p_layer3").offsetWidth;}
   p_scrollX = self.scrollX;
   p_scrollY = self.scrollY;
   if(p_height > p_height2)
   {getElementById("p_layer1").style.top  = p_scrollY+p_margin1;
    getElementById("p_layer1").style.left = self.innerWidth-getElementById("p_layer1").offsetWidth+p_scrollX-p_margin2;
    getElementById("p_layer2").style.top  = self.innerHeight-getElementById("p_layer2").offsetHeight-p_temp3+p_scrollY-p_nn6-p_margin3;
    getElementById("p_layer2").style.left = self.innerWidth-getElementById("p_layer2").offsetWidth+p_scrollX-p_margin2;
    getElementById("p_layer1").style.visibility = "visible";
    getElementById("p_layer2").style.visibility = "visible";
    p_obj[1] = getElementById("p_layer1");
    p_obj[2] = getElementById("p_layer2");}
   else
   {getElementById("p_layer1").style.visibility = "hidden";
    getElementById("p_layer2").style.visibility = "hidden";}
   if(p_width > p_width2)
   {getElementById("p_layer3").style.top  = self.innerHeight-getElementById("p_layer3").offsetHeight+p_scrollY-p_nn6-p_margin3;
    getElementById("p_layer3").style.left = self.innerWidth-getElementById("p_layer3").offsetWidth-p_temp2+p_scrollX-p_margin2;
    getElementById("p_layer4").style.top  = self.innerHeight-getElementById("p_layer4").offsetHeight+p_scrollY-p_nn6-p_margin3;
    getElementById("p_layer4").style.left = p_scrollX+p_margin4;
    getElementById("p_layer3").style.visibility = "visible";
    getElementById("p_layer4").style.visibility = "visible";
    p_obj[3] = getElementById("p_layer3");
    p_obj[4] = getElementById("p_layer4");}
   else
   {getElementById("p_layer3").style.visibility = "hidden";
    getElementById("p_layer4").style.visibility = "hidden";}}
  if(document.layers)
  {p_temp2 = 0;
   p_temp3 = 0;
   if(p_height > p_height2)
   {p_temp2 = layers["p_layer2"].clip.height;}
   if(p_width > p_width2)
   {p_temp3 = layers["p_layer3"].clip.width;}
   p_scrollX = pageXOffset;
   p_scrollY = pageYOffset;
   if(p_height > p_height2)
   {layers["p_layer1"].top  = p_scrollY+p_margin1;
    layers["p_layer1"].left = self.innerWidth-layers["p_layer1"].clip.width+p_scrollX-p_margin2;
    layers["p_layer2"].top  = self.innerHeight-layers["p_layer2"].clip.height-p_temp3+p_scrollY-p_margin3;
    layers["p_layer2"].left = self.innerWidth-layers["p_layer2"].clip.width+p_scrollX-p_margin2;
    layers["p_layer1"].visibility = "visible";
    layers["p_layer2"].visibility = "visible";
    p_obj[1] = layers["p_layer1"];
    p_obj[2] = layers["p_layer2"];}
   else
   {layers["p_layer1"].visibility = "hidden";
    layers["p_layer2"].visibility = "hidden";}
   if(p_width > p_width2)
   {layers["p_layer3"].top  = self.innerHeight-layers["p_layer3"].clip.height+p_scrollY-p_margin3;
    layers["p_layer3"].left = self.innerWidth-layers["p_layer3"].clip.width-p_temp2+p_scrollX-p_margin2;
    layers["p_layer4"].top  = self.innerHeight-layers["p_layer4"].clip.height+p_scrollY-p_margin3;
    layers["p_layer4"].left = p_scrollX+p_margin4;
    layers["p_layer3"].visibility = "visible";
    layers["p_layer4"].visibility = "visible";
    p_obj[3] = layers["p_layer3"];
    p_obj[4] = layers["p_layer4"];}
   else
   {layers["p_layer3"].visibility = "hidden";
    layers["p_layer4"].visibility = "hidden";}
   layers["p_layer"].clip.width  = p_width;
   layers["p_layer"].clip.height = p_height;
   for(i=1;i<=4;i++)
   {if(p_obj[i])
    {p_obj[i].captureEvents(Event.MOUSEDOWN);
     p_obj[i].captureEvents(Event.MOUSEUP);
     p_obj[i].captureEvents(Event.MOUSEOUT);}}}
  for(i=1;i<=4;i++)
  {if(p_obj[i])
   {p_obj[i].onmousedown = page_scroll_on;
    p_obj[i].onmouseup   = page_scroll_off;
    p_obj[i].onmouseout  = page_scroll_off;}}}
 if(!document.layers)
 {onresize = page_scroll_rewrite;}
 else
 {onresize = page_reload;}
 page_scroll_repositioning();
 p_id2 = setTimeout('page_scroll_timer()',100);}


function page_scroll_repositioning()
{with(document)
 if(document.all)
 {if(location.hash)
  {anchor = location.hash.replace("#","");
   all("p_layer").style.top  = all(anchor).offsetTop*-1;
   all("p_layer").style.left = all(anchor).offsetLeft*-1;
   body.scrollTop  = 0;
   body.scrollLeft = 0;}}
 else if(document.getElementById)
 {if(location.hash)
  {anchor = location.hash.replace("#","");
   getElementById("p_layer").style.top  = getElementById(anchor).offsetTop*-1;
   getElementById("p_layer").style.left = getElementById(anchor).offsetLeft*-1;
   self.scrollX = 0;
   self.scrollY = 0;}}
 else if(document.layers)
 {if(location.hash)
  {anchor = location.hash.replace("#","");
   layers["p_layer"].top  = layers["p_layer"].document.anchors[anchor].y*-1;
   layers["p_layer"].left = layers["p_layer"].document.anchors[anchor].x*-1;
   self.pageYoffset = 0;
   self.pageXoffset = 0;}}}


function page_scroll_timer()
{with(document)
 {if(document.all)
  {if(p_scrollY != body.scrollTop || p_scrollX != body.scrollLeft)
   {page_scroll_repositioning();}}
  else if(document.getElementById)
  {if(p_scrollY != self.scrollY || p_scrollX != self.scrollX)
   {page_scroll_repositioning();}}
  else if(document.layers)
  {if(p_scrollY != self.pageYoffset || p_scrollX != self.pageXoffset)
   {page_scroll_repositioning();}}}
 p_id2 = setTimeout('page_scroll_timer()',100);}


function page_reload()
{self.location.reload();}


function page_scroll_on()
{clearTimeout(p_id2);
 if(this.id)
 {p_button = this.id;}
 with(document)
 {if(document.all && navigator.userAgent.indexOf("Opera") == -1)
  {with(all("p_layer"))
   {if(p_button== "p_layer1" && offsetTop < p_top)
    {style.top = offsetTop+(p_sokudo-0);
     if(offsetTop >= p_top)
     {style.top = p_top;}}
    else if(p_button== "p_layer2" && offsetTop > (p_height-p_height2)*-1)
    {style.top    = offsetTop-p_sokudo;
     if(offsetTop <= (p_height-p_height2)*-1)
     {style.top = (p_height-p_height2)*-1;}}
    else if(p_button== "p_layer3" && offsetLeft > (p_width-p_width2)*-1)
    {style.left = offsetLeft-(p_sokudo-0);
     if(offsetLeft <= (p_width-p_width2+p_left)*-1)
     {style.left = (p_width-p_width2)*-1;}}
    else if(p_button== "p_layer4" && offsetLeft < p_left)
    {style.left = offsetLeft+(p_sokudo-0);
     if(offsetLeft > p_left)
     {style.left = p_left;}}}}
  else if(document.all && navigator.userAgent.indexOf("Opera") != -1)
  {with(all("p_layer"))
   {if(p_button== "p_layer1" && offsetTop < p_top)
    {style.top    = offsetTop+(p_sokudo-0);
     if(offsetTop >= p_top)
     {style.top = p_top;}
     style.height = p_height3-offsetTop;}
    else if(p_button== "p_layer2" && offsetTop > (p_height-p_height2)*-1)
    {style.top = offsetTop-p_sokudo;
     if(offsetTop <= (p_height-p_height2)*-1)
     {style.top = (p_height-p_height2)*-1;}
     style.height = p_height3-offsetTop;}
    else if(p_button== "p_layer3" && offsetLeft > (p_width-p_width2)*-1)
    {style.left = offsetLeft-(p_sokudo-0);
     if(offsetLeft <= (p_width-p_width2+p_left)*-1)
     {style.left = (p_width-p_width2)*-1;}
     style.width = p_width3-offsetLeft;}
    else if(p_button== "p_layer4" && offsetLeft < p_left)
    {style.left = offsetLeft+(p_sokudo-0);
     if(offsetLeft > p_left)
     {style.left = p_left;}
     style.width = p_width3-offsetLeft;}}}
  else if(document.getElementById)
  {with(getElementById("p_layer"))
   {if(p_button== "p_layer1" && offsetTop < p_top)
    {style.top = offsetTop+(p_sokudo-0);
     if(offsetTop >= p_top)
     {style.top = p_top;}}
    else if(p_button== "p_layer2" && offsetTop > (p_height-p_height2+p_nn6)*-1)
    {style.top = offsetTop-p_sokudo;
     if(offsetTop <= (p_height-p_height2+p_nn6)*-1)
     {style.top = (p_height-p_height2+p_nn6)*-1;}}
    else if(p_button== "p_layer3" && offsetLeft > (p_width-p_width2)*-1)
    {style.left = offsetLeft-(p_sokudo-0);
     if(offsetLeft <= (p_width-p_width2+p_left)*-1)
     {style.left = (p_width-p_width2)*-1;}}
    else if(p_button== "p_layer4" && offsetLeft < p_left)
    {style.left = offsetLeft+(p_sokudo-0);
     if(offsetLeft > p_left)
     {style.left = p_left;}}}}
  if(document.layers)
  {with(layers["p_layer"])
   {if(p_button== "p_layer1" && pageY < p_top)
    {top = pageY+(p_sokudo-0);
     if(pageY >= p_top)
     {top = p_top;}}
    else if(p_button== "p_layer2" && pageY > (p_height-p_height2)*-1)
    {top = pageY-p_sokudo;
     if(pageY <= (p_height-p_height2)*-1)
     {top = (p_height-p_height2)*-1;}}
    else if(p_button== "p_layer3" && pageX > (p_width-p_width2)*-1)
    {left = pageX-(p_sokudo-0);
     if(pageX <= (p_width-p_width2+p_left)*-1)
     {left = (p_width-p_width2)*-1;}}
    else if(p_button== "p_layer4" && pageX < p_left)
    {left = pageX+(p_sokudo-0);
     if(pageX > p_left)
     {left = p_left;}}}}}
 p_id = setTimeout('page_scroll_on()',100);}


function page_scroll_off()
{p_id2 = setTimeout('page_scroll_timer()',100);
 clearTimeout(p_id);}


function page_scroll_write2()
{p_table1 = '<table border="0" cellspacing="0" cellpadding="0"><tr><td class="p_button">'
 p_table2 = '</td></tr></table>';
 with(document)
 {open();
  if(p_button == "yes" && !document.layers)
  {write('<div id="p_layer1" class="p_layers">'+p_table1+'<button class="p_button">'+p_ue+'</button>'+p_table2+'</div>');
   write('<div id="p_layer2" class="p_layers">'+p_table1+'<button class="p_button">'+p_shita+'</button>'+p_table2+'</div>');
   write('<div id="p_layer3" class="p_layers">'+p_table1+'<button class="p_button">'+p_migi+'</button>'+p_table2+'</div>');
   write('<div id="p_layer4" class="p_layers">'+p_table1+'<button class="p_button">'+p_hidari+'</button>'+p_table2+'</div>');}
  else
  {write('<div id="p_layer1" class="p_layers">'+p_table1+p_ue+p_table2+'</div>');
   write('<div id="p_layer2" class="p_layers">'+p_table1+p_shita+p_table2+'</div>');
   write('<div id="p_layer3" class="p_layers">'+p_table1+p_migi+p_table2+'</div>');
   write('<div id="p_layer4" class="p_layers">'+p_table1+p_hidari+p_table2+'</div>');}
  close();}}


with(document)
{open();
 write('<style type="text/css">\n<!-\-\n');
 if((document.all && navigator.userAgent.indexOf("Opera") == -1) || document.layers)
 {write('body     {overflow:hidden;}');
  write('#p_layer {position:absolute;}');}
 else if(navigator.userAgent.indexOf("Opera") != -1)
 {write('#p_layer {position:absolute;overflow:hidden;}');}
 else if(document.getElementById)
 {write('body     {overflow:hidden;}');
  write('#p_layer {position:relative;}');}
 if(p_color)
 {p_style += 'color:'+p_color+';';}
 if(p_bgcolor)
 {p_style += 'background:'+p_bgcolor+';';}
 if(p_weight)
 {p_style += 'font-weight:'+p_weight+';';}
 if(p_size)
 {p_style += 'font-size:'+p_size+';';}
 write('.p_layers{position:absolute;visibility:hidden;}');
 write('.p_button{'+p_style+'}');
 write('-\->\n<\/style>');}


// -->
</script>

■ソース２(以下のソースを<body>〜<body>の間に書き込んでください)  
  
<div id="p_layer">

■ソース３(以下のソースを<body>〜</body>の間に書き込んでください)  
  
</div>
<script language="JavaScript" type="text/javascript"><!--
page_scroll_write();
// --></script>
 

■スクリプト無効時には動作しません。
　スクロールバーは通常通り表示されます。
　フレームページで使用する場合は<frame>のscrolling属性の
　属性値をautoにする事をお勧めします。

ウェブ木箱＞サンプル集
copyright(C) 2003-2004 あう