ここでの動作環境は次のとおり。

  • PC: MacOS X 10.6.3 / Safari 5.0
  • iPhone: 4.1
  • iPad: 3.2.2

まずはマークアップからだ。スクロールUIとしたい箇所を<div>で囲み、idに"scrollable"を、classに"yui3-scrollview-loading"を設定する。

<div id="scrollable" class="yui3-scrollview-loading">
    <ul>
        <li>ネット</li>
        <li>経営</li>
        <li>エンタープライズ</li>
        <li>クリエイティブ</li>
        <li>ビジネスPC</li>
        <li>パソコン</li>
        <li>携帯</li>
        <li>家電</li>
        <li>ホビー</li>
        <li>エンタテイメント</li>
        <li>ライフ</li>
        <li>ブック</li>
    </ul>
</div>

マイコミジャーナル左部のチャンネルを<ul><li>でマークアップしている。リファレンスによると必ずしもリストである必要はないということだ。

続いてJavaScript部分だ。new Y.ScrollViewでオブジェクトを作成する。コンストラクタで次の2プロパティを指定する。

プロパティ 説明
srcNode ScrollViewのルートノードを指定する
height ScrollViewの高さを指定する

コードは次のとおり。

YUI().use('scrollview-base', function(Y)
{
    var scrollView = new Y.ScrollView
    (
        {
            srcNode: '#scrollable',
            height: 310
        }
    );

    scrollView.render();
});

最後にCSSを定義する。リファレンス内のサンプルCSSではおもに3つのスタイルを定義している。

  • Bounding Box: ScrollView全体をかこむ領域のスタイル。クラスは"yui3-scrollview"
  • Content Box: ScrollView内のスタイル。クラスは"yui3-scrollview-content"
  • リスト部: yui3-scrollview-content内のリストスタイルを定義。liはinline-blockとしている

デモのサンプルにはこのうちContent Boxに相当するスタイルが見つからなかったので、ここではBounding Boxとリスト部に相当するスタイルを定義した。コードは次のとおり。

html, body 
{
    margin:0;
    padding:0;
    font-family: arial,helvetica,clean,sans-serif;
}

#scrollheader
{
    background-color:#6d83a1;
    border:1px solid #000;
    margin:10px 10px 0 10px;

    height:44px;
    width:400px;

    background: -webkit-gradient
    (
        linear,
        left top,
        left bottom,
        from(#d8dee6),
        color-stop(0.01, #b0bccc),
        color-stop(0.49, #889bb3),
        color-stop(0.50, #8094ae),
        to(#6d83a1)
    );

    float:left;
}

#scrollheader h1
{
    color: #fff;

    margin:0;
    padding:10px 0;

    text-align:center;

    font-size:150%;
    font-weight:bold;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.7);
}

#scrollable li
{
    border-bottom: 1px solid #ccc;
    padding: 8px;
    font-size: 140%;
    font-weight: bold;
}

#scrollable.yui3-scrollview-loading
{
    display:block;
    visibility:hidden;
}

.yui3-scrollview
{
    margin:0 10px 10px 10px;
    border:1px solid #000;
    border-top:0;

    width:400px;

    clear:left;
    float:left;
}

#scrollable.yui3-scrollview-loadingでvisibility:hidden;としておくことで、ScrollView描画前にレイアウトが崩れるのを防いでいる。

マークアップ、JavaScript、CSSを1ファイルに記述したサンプルは次のとおり。

scrollview.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>MJ Channel x ScrollView</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <style>
        <!--
        html, body
        {
            margin:0;
            padding:0;
            font-family: arial,helvetica,clean,sans-serif;
        }

        #scrollheader
        {
            background-color:#6d83a1;
            border:1px solid #000;
            margin:10px 10px 0 10px;

            height:44px;
            width:400px;

            background: -webkit-gradient
            (
                linear,
                left top,
                left bottom,
                from(#d8dee6),
                color-stop(0.01, #b0bccc),
                color-stop(0.49, #889bb3),
                color-stop(0.50, #8094ae),
                to(#6d83a1)
            );

            float:left;
        }

        #scrollheader h1
        {
            color: #fff;

            margin:0;
            padding:10px 0;

            text-align:center;

            font-size:150%;
            font-weight:bold;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.7);
        }

        #scrollable li
        {
            border-bottom: 1px solid #ccc;
            padding: 8px;
            font-size: 140%;
            font-weight: bold;
        }

        #scrollable.yui3-scrollview-loading
        {
            display:block;
            visibility:hidden;
        }

        .yui3-scrollview
        {
            margin:0 10px 10px 10px;
            border:1px solid #000;
            border-top:0;

            width:400px;

            clear:left;
            float:left;
        }
        -->
        </style>
        <link media="handheld, only screen and (max-device-width: 480px)" href="http://developer.yahoo.com/yui/3/examples/scrollview/assets/examples-smallscreen.css" type="text/css" rel="stylesheet" charset="utf-8">
        <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body class="yui-skin-sam">
        <div id="scrollheader">
            <h1>MJ Channel x ScrollView</h1>
        </div>
        <div id="scrollable" class="yui3-scrollview-loading">
            <ul>
                <li>ネット</li>
                <li>経営</li>
                <li>エンタープライズ</li>
                <li>クリエイティブ</li>
                <li>ビジネスPC</li>
                <li>パソコン</li>
                <li>携帯</li>
                <li>家電</li>
                <li>ホビー</li>
                <li>エンタテイメント</li>
                <li>ライフ</li>
                <li>ブック</li>
            </ul>
        </div>

        <script type="text/javascript" charset="utf-8">
        <!--
        YUI().use('scrollview-base', function(Y)
        {
            var scrollView = new Y.ScrollView
            (
                {
                    srcNode: '#scrollable',
                    height: 310
                }
            );

            scrollView.render();
        });
        -->
        </script>
    </body>
</html>

<link media="handheld, only screen and (max-device-width: 480px)">でロードしているファイルは、画面幅が小さいタッチデバイス向けのCSS。scrollview.htmlをWebブラウザで表示し、結果を確認する。

Safari上での表示。iPhoneネイティブアプリのスクロールUIのようなレイアウトとなった|M@PC上でもマウスでフリックをすればスクロールされる

iPhoneのMobile Safari上での表示

iPadのMobile Safari上での表示

PC上ではマウス操作でフリック操作をおこなえばスクロールできるようになっている。縦スクロールバーが表示されない点以外は、iPhoneネイティブアプリのスクロールUIそのものだ。