<< 誕生日 | main | PCとスマホの振り分け >>

iframeのスクロールバーを装飾したい!jQueryプラグインjScrollPane

ゴールデンウィーク前(中?)進行の皆さまファイトです!
私もつい3日前に「4月中に・・・」と2件相談をいただいてお断りいたしました(>_<)
このプラグインも急なコーディング案件のなかで助かったのでメモメモ( ..)φ

サイトの新着情報や、狭い範囲で沢山の情報を載せたいときに使うインラインフレーム。
スクロールバーをページのデザインに合わせて色を変更するには、昔はCSSで指定していました。
でもChromeでは反映されてない。IE以外はダメらしい。
あわててググって出てきたのがjQueryのプラグインjScrollPaneです。

必要なファイルをDLしてhtmlのheadにリンクし、cssでサイズや色指定すればOK!

http://www.eupholab.net/post/55878847106
http://htmlnavi.com/?p=8
こちらの記事を参考にさせていただきました。

私は上下の端の■も表示させたかったので、headの記述に

<script type="text/javascript">
$(function() {
    $('.scroll-pane').jScrollPane({
    showArrows : true,
     });
});
</script>

とArrows表示を指定。
htmlには

<div class="scroll-pane">
<div id="scr">
ここにiframeの内容を記述
</div>
</div>

とscroll-paneとscrで囲ってあげるだけ。
とても軽くて安定しています♪
| 仕事 | 09:50 | comments(0) | - | pookmark |

スポンサーサイト

| - | 09:50 | - | - | pookmark |
Comment










12
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--
About
New entries
Categories
Archives
Recent comment
Jugem Sponsored links
Recomend
Mobile
qrcode
Links
Others