WEB制作ノウハウに関する質問です。

javascriptで動いてますね。

jQueryのpluginでそういうのがあるようです。

jQuery以外に

http://www.ohs.ac.jp/common/js/top.js

を読み込んでいて、この中にスクロールのことが書いてあります。

div の id が information

がスクロールしているボックスの外側だと思います。

jQuery自体の使い方やjavascriptそのものが不得手なので自分では書けないですが、

top.jsから引用させていただくと

	$('#information dl').jScrollPane();
	$("#information .jScrollPaneContainer").width("220px");

あたりを推測するにdomの操作と思います。

細かい動きは私では説明できず申し訳ないです。

phpで呼び出されているというのは、なになのかわかりませんが、

TOPページ自体はindex.phpのようなのでphpは使っていると思いますが、

スクロール自体は関係ないかと思います。

http://www4.nasuinfo.or.jp/~gushioda/css/page08.html

あとはCSSでスクロールバーを細く設定するだけです。

HTML+CSS+JavaScriptで作られている。

http://www.n-son.com/scripts/jsScrolling/

> 知りたい部分は、スクロールバーが何の形式のファイルで、

> どこから、どう呼びだされているかという事です。

ソース9行目に書かれているindex.cssを見てみてください。

jScrollで検索していって、中身にbackground:urlと記述されてる場所が見つかると思います。

ここで使用されている画像がスクロールボタンの上下画像になります。拡張子はgifになってます。

スクロールバーの部分に関しては、画像ではなくブロックの背景に色をつけてるだけです。

スタイルシートのoverflowプロパティで擬似フレームが作成可能です。

この時、scrollを指定することによって、スクロールバーが出てきますが、

これはブラウザのスクロールバーと同じデザインになります。

このスクロールバーのデザインを自分で作成したものに変えたい場合、JavaScriptを使用します。

具体的には、overflowプロパティにhiddenを記述して、スクロールバーを出さないようにします。

次に用意した画像あるいはブロック（上下ボタン、スクロールバー）を適当な場所に配置し、

それら画像あるいはブロックに対してイベントを記述します。

擬似フレームのすぐ右側に、それら画像群を同じ高さに収めると自然な仕上がりになります。

イベントの中身は、上下画像がクリックされたら擬似フレーム内を20px上下に移動する。

スクロールバーがマウスで移動されたら、移動距離によって擬似フレーム内を移動する。

大雑把に言うとそんな感じで実装することになります。

件のページではjQueryのjScrollPaneプラインを用いて実装しているみたいです。

JavaScriptの知識がある程度必要ですが、上記の方法で自分で実装するよりは簡単なはずです。

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane....

↑はjScrollPaneのプラグインサイトです。このサイトのExamplesのソースは、

件のページよりもコードも少なく読みやすいと思うので参考にしてみて下さい。

スクロールバー部分のデザインはjQueryというjavascriptのライブラリを使用しているようです。

ソースでいうと、以下の部分でjquery本体とそのプラグインを読み込んでいます。

(おそらく、この中のtop.jsというもののみがサイト制作者オリジナルのソースでしょう。

jquery.vgrid.jsとjquery.easing.jsはとりあえず、

前者はウィンドウサイズを変えた時の動きの制御用、後者はページ内移動時のアニメーションの制御用と考えておけば問題有りません)

<script type="text/javascript" src="/common/js/jquery.js"></script>

<script type="text/javascript" src="/common/js/jquery.vgrid.js"></script>

<script type="text/javascript" src="/common/js/jquery.easing.js"></script>

<script type="text/javascript" src="/common/js/top.js"></script>

スクロールバーのカスタマイズをしたいだけでしたら、jQueryとjScrollPaneというプラグインを使用するのが一番簡単ではないかと思います。

jScrollPaneについては以下のブログで分かりやすく解説されているのでご参照下さい。

http://www.moongift.jp/2009/03/jscrollpane/