人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: pipi_n
●カテゴリ:ウェブ制作
✍キーワード:Flash VB.NET スクロール スタイルシート 画像
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● hive7134
●60ポイント

>|

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>
◎質問者からの返答

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ