
知人から、
・ヘッダーとフッターは固定で表示
・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> |
<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-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> |
<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でも試してみたところ問題無く動作したー 😀