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

>|

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>