知人から、
・ヘッダーとフッターは固定で表示
・PCでもiPhoneでもiframeのようにスクロールバーでコンテンツ部分をスクロールさせたい
という相談を受けたので、iframeで良いのでは？と思ったけど、iPhoneでは「iframeは非推奨」との事。
なのでいつも通り、Google先生に聞いてみたところ良いJavaScriptライブラリがあった。
Dragdealer JS
ブログ：http://blog.ovidiu.ch/dragdealer-js
ドキュメント：http://code.ovidiu.ch/dragdealer/
このライブラリで出来る事は、スクロールバー・写真のスライドショー・コンテンツをドラッグでスライドなど。
IEでもSafariでもiPhoneのSafariでも問題無く動作しました。
使いかたは簡単。今回は知人の要望通り「スクロールバー」を実装してみる。
ここからソースコードをダウンロードし、head内で読み込ませます。
※ 他に面倒だったので「dragdealer-main.css」というCSSをサンプルコードから落としてきて読み込ませてます。
<html> <head> <link rel="stylesheet" type="text/css" href="dragdealer.css" /> <!-- このCSSは各自のサイトのデザインに併せて調整 --> <link rel="stylesheet" type="text/css" href="dragdealer-main.css" /> <!-- このCSSは各自のサイトのデザインに併せて調整 --> <script type="text/javascript" src="dragdealer.js"></script> </head> <body> </body> </html> |
で次にスライダー部分。これが無いと動かんですよー 😀
※サンプルサイトのCSSを読み込ませているので、classに必要の無いものが指定されているが無視で。
<div id="scroll-bar" class="dragdealer rounded-cornered">
<div class="red-bar handle"></div>
</div> |
これがスクロールバー部分になるので、次に本題のコンテンツ部分を実装
<div id="scroll-mask" class="top-spaced rounded-cornered">
<div id="scroll-content">
<p>
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
テスト<br />
</p>
</div>
</div> |
これが下記のような画面になる。
これで完了。
iPhoneでも試してみたところ問題無く動作したー 😀
