iPhoneでiframeのようにスクロール

知人から、

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

投稿者:

kishir

趣味: sk8, ピスト、ターンテーブル、レコード 仕事: Python, Objective-C, PHP, JavaScript

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です