UNIRRY

WEBデザインとホロスコープと宇宙のブログ

appendした要素内でスクロールバーのデザインを変更する

asdcf

モーダルボックスで要素をappendを使って追加してどこかを押したらその要素が消える、というのがありますが、そのappendした要素内でスクロールバーを使いたい、けどデフォルトのデザインではダメだなーというのが前にありまして、その時はできなかったんですが、のちのちともだちエレメンツでもう一度やってみたところなんとかできたので記載します。

appendした要素内のスクロールバーのデザイン変更がむずかしい!

スクロールバーの装飾用プラグインはいろんなものがあって、自作で作るのは結構むずかしいっぽいです。普通にワンソースでいけるなら、custom_scrollbar(http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html)これが一番いい感じかなとか思ってます。動きとかきれいで。

ただappendした要素内ではコールバック関数しかきかなく、そのコールバックではthisが使えないので、このプラグインが実行できませんでした。というか高機能のどのスクロールプラグインも実行できませんでした。こーなったら自作で簡易的なスクロールバーを作るしか・・・とも思いましたが、自作は自作でかなりのコード数になるようだったので、自作レベルで簡単に扱えそうなスクロールプラグインを捜索して、こんなものを見つけました・・・そういえば前にみたなと思いつつ、やってみたところ、唯一成功したのがこちら。

jscrollpane

http://jscrollpane.kelvinluck.com/basic.html

jscrollpaneをappendした要素内で実行する

load関数でコールバック関数を使う

基本構文はこれ。
http://semooh.jp/jquery/api/ajax/load/+url,+data,+callback+/

実行するjs部分

$("#modalboxinner").append().load("/app/fbelement/ .firelist", null, function pop(){
       $('.scroll-pane').jScrollPane(); // ここでスクロールを実行
});

div「#modalboxinner」に、/app/fbelement/ディレクトリindexファイルのclass「.firelist」部分をロードして要素を追加、した後に、コールバック関数でfunction pop()を呼び出す。その関数内で、jscrollpaneを実行する。

もちろんhtmlでは、jQueryとcssをよんでおきます。

<script type="text/javascript" src="/js/jQuery/jquery-1.6.2.min.js"></script>
<link type="text/css" href="/css/jquery.jscrollpane.css" rel="stylesheet" media="all">
<script type="text/javascript" src="/js/jquery.jscrollpane.js"></script>

ただ、あれですね、スクロールデザイン変更が自作で組めたら、なんの問題もないと思います。^○^


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3