スタイルシートで発生させたスクロールバーを画像で表示するには?


iframeを使いスクロールバーを画像にする方法は見つかったのですが
http://himajin.moo.jp/java/bar/scroll.html
これをiframeを使わないで画像にする方法というのはあるのでしょうか?
(flash、VB.NETは使わず)

回答の条件
  • 1人2回まで
  • 登録:2006/08/28 13:10:01
  • 終了:2006/09/04 13:10:08

回答(1件)

id:hive7134 No.1

hive7134回答回数167ベストアンサー獲得回数162006/08/28 15:06:57

ポイント60pt

>|

window.slide.scroll(0,(bar_y - 15)*4);

|<

の、slide部分が、Window(Frame)のnameに相当しますので、

slideの代わりにselfとすれば、画像をおいているフレーム自身をスクロールさせることが可能です。

(ただし、スクロールバーに見せかけた画像ごと動いてしまうので、そのままではおかしな動きをしてしまいます。)


また、Divタグ内に表示されるスクロールバーを操作するには、

document.getElementById("hoge").scrollTop

を利用することで操作が可能になります。

参考

http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=2850...

コード:

    <div id="hoge">
      ...
    </div>

というのがあるとしまして、

コード:

    document.getElementById("hoge").scrollTop = 100;

みたいなイメージです。


あんまり詳しく見てませんが、こんな感じのコードで動作できるはずです。

<script language="JavaScript"><!--
flag=0;
var temp,set_y;
bar_y=15;d_flag=0;

function idou(updown){
	if(!flag)return;
	if(updown)temp=updown;
	if(temp=="down" && bar_y < 55)
	  bar_y++;
	if(temp=="up" && bar_y > 15)
	  bar_y--;
	document.bar.style.top=bar_y;
	document.getElementById("divslide").scrollTop = ((bar_y - 15)*4);
	setTimeout("idou()", 10);
}

function idou2(){
	d_y=document.bar.style.pixelTop;
	y=document.getElementById("base").style.pixelTop;
	w_y=document.body.scrollTop;
	if((d_y + y) < (event.y + w_y))
	    bar_y+=20;
	else
	    bar_y-=20;
	  if(bar_y > 55)bar_y =55;
	  if(bar_y < 15)bar_y =15;
	document.bar.style.top=bar_y;
	document.getElementById("divslide").scrollTop = ((bar_y - 15)*4);
}

function d_down(){
	d_flag=1;
	d_y=document.bar.style.pixelTop;
	set_y=(d_y-event.y);
}

function d_move(){
	if(!d_flag)return;
	bar_y=event.y+set_y;
	  if(bar_y > 55)bar_y =55;
	  if(bar_y < 15)bar_y =15;
	document.bar.style.top=bar_y;
	document.getElementById("divslide").scrollTop = ((bar_y - 15)*4);
}/*himajin.moo.jp*/
// --></script>

<div id="base" style="position:absolute;top:50px; left:10px;" onmouseup="d_flag=0;"onmousemove="d_move();return false;">
<div style="overflow:hidden;width:300px;height:120px;" id="divslide">
afwe;oivnawpoe4iga@
opwericfja:@pweofjk;
apwkcf;wef[]awe
fawhefopiajwepfoawe
fjaw@eopifja@wpeo@oek
r@paowi4tr@opq3i4jef
opiaw@eprfoaq
efjpao3wierj@oiwefj@paowiejf
awepfoiawjef@poi
afwe;oivnawpoe4iga@o
pwericfja:@pweofjk;a
pwkcf;wef[]awe
fawhefopiajwepfoawe
fjaw@eopifja@wpeo@o
ekr@paowi4tr@opq3i4
jefopiaw@eprfoaq
efjpao3wierj@oiwefj@
paowiejf
awepfoiawjef@poi
afwe;oivnawpoe4iga@o
pwericfja:@pweofjk;a
pwkcf;wef[]awe
fawhefopiajwepfoawe
fjaw@eopifja@wpeo@oe
kr@paowi4tr@opq3i4je
fopiaw@eprfoaq
efjpao3wierj@oiwefj@
paowiejf
awepfoiawjef@poi
afwe;oivnawpoe4iga@op
wericfja:@pweofjk;apw
kcf;wef[]awe
fawhefopiajwepfoawe
fjaw@eopifja@wpeo@oek
r@paowi4tr@opq3i4jefopiaw@eprfoaq
efjpao3wierj@oiwefj@paowiejf
awepfoiawjef@poi
</div>
<img src="base.gif" border=0 style="position:absolute; top:15px; left:300px;height:90; width:15;"onmousedown="idou2()">
<img src="up.gif" border=0 style="position:absolute; top:0px; left:300px;height:15; width:15;"onmousedown="flag=1;idou('up');"onmouseup="flag=0">
<img src="down.gif" border=0 style="position:absolute; top:105px; left:300px;height:15; width:15;"onmousedown="flag=1;idou('down');"onmouseup="flag=0">
<img name="bar"src="slide.gif" border=0 style="position:absolute; top:15px; left:300px;height:50; width:15;"onmousedown="d_down()"onmouseout="d_flag=0;">
</div>
id:pipi_n

回答ありがとうございます!

このままコピーさせて頂きIE、Operaはいい感じなのですが、FireFoxではドラッグ操作が効かない、Netscapeにいたっては全然動かなかったです。

文章が長くなってくると下までスクロールしてくれないなど結構元ソースに問題があるようですね。

iframe使ってもいいので引き続きご回答お待ちしております。(iframeの方はもう一つ質問だそうかな・・・)

2006/08/28 15:41:02

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません