スキンカスタマイズ [スクロールボタン]

久しぶりに弄ってみました。＾＾；

「スキンカスタマイズ」と「■デジモノ大好き　TOPICS■」が長くなってきたんで、インラインフレームにスクロールバーで短くしようかと思ったんですけど、スクロールバーはちょっとかっちょ悪い。

なにかいい方法ないかと探してたんですけど、ありました。（笑）
javascriptでいいモノが。＾＾

基本的な構造は、[calendar]と同じです。

カスタムペインにインラインフレームを置いて、外部のHTML（news.html）を読み込んでます。

「news.html」にスクロールをコントロールする「div_scroll.js」とマウスオーバーさせたときアイコンをコントロールする「over.js」を読み込んでます。

使ってみたいかたは、こちらからどんぞ。

http://www002.upp.so-net.ne.jp/b_chboy2/blog/js/div_scroll.js

http://www002.upp.so-net.ne.jp/b_chboy2/blog/js/over.js

HTMLの中にもアイコンコントロールの記述がありますのでHTMLを参考にしてみてください。

スクロールアップボタン
<a href="JavaScript:void(0);" onmousedown="divScroll('news','newscontents','up');" onmouseup="clearInterval(scl1);"><img src="img/new_up.gif" alt="" name="up" id="up" onmouseover="imageUpOver()" onmouseout="imageUpOut();" border="0" height="20" width="20"></a>


スクロールダウンボタン
<a href="JavaScript:void(0);" onmousedown="divScroll('news','newscontents','down');" onmouseup="clearInterval(scl1);" onmouseover="imageDownOver();"><img src="img/new_down.gif" alt="" name="down" id="down" onmouseover="imageDownOver();" onmouseout="imageDownOut();clearInterval(scl1);" border="0" height="20" width="20"></a>

あと、赤文字が表示領域の設定です。

<style>
#news{position:relative;width:170px; height:168px;overflow:hidden;text-align:left; clip: rect(0 400 30 0)}
#newscontents{position:relative; left:0px; top:0px;font-size:10px;text-align:left;line-height:140%}
</style>

ただですね～。
マウスのホイールでスクロールできないんでそれが、難点です。＾＾；

コメント 2

面白いですね～！！
しかもコンパクトだから見た目もシンプルでカッコイイヽ(*^○^*)ノ
私携帯で見ること多いから、サイドバーはかなり削ってしまってるんですが、こうすればなんか試すことも出来そうですね！
しかしてkovaioさんはいつも珍しいことを・・・＼(◎o◎)／！（笑）
by shikayu (2007-06-04 01:27) 

shikayuさん　こんばんはっ！＾＾
コメント＆nice!ありがとうございますぅ～！！

でへ。＾＾
でしょでしょ！面白いでしょ～！
左右のサイドバーの長さがバラバラでちょっと気になってたんだけど
これならサイドバーが長くなっても調整できるし。＾＾

> いつも珍しいことを・・・
デフォルトでないものがkovaioはスキなんですよ。＾＾；
限定モノとかめちゃ弱いですぅ～。（笑）
by kovaio (2007-06-04 23:20)