スクロールの最小限の設定

ここに、各項目に4個の画像が含まれる、合計3項目のスクロールがあります:

スタンドアロン・デモ

矢印ボタンをクリックするか、またはキーボードから左または右矢印キーを使用して、 要素をスクロールすることができます。

この例では、最小限の設定を目的としているため、矢印ボタンをクリックするか、 キーボードから左または右矢印キーを使用してスクロールすることができます。 この例がどのように動作するかを理解することは、HTMLスクロールの背景にある理論 を教えてくれるので、重要なことです。これを理解することで、要望のするあらゆる 種類のスクロールを構築することができるようになります。ビジュアルなスタイルでは なく、機能性にのみ注目しているので、デモには非常に原始的なルック＆フィールを 使用しています。皆様のページでは、スクロールへのスタイル設定に標準のHTML/CSS 技術を使用することができます。

HTML コード

これは、スクロールのレイアウト方法です。scrollable と、その中の項目への別な ラッパー要素にルート要素を持っていなければなりません。 項目には、画像、Flash、HTMLテキストやフォームなど何でも含めることができます。 項目は、どのような量の子要素でも持つことができ、サイズも任意です。 ここには、www.flickr.com からの簡単なサムネイル画像があります:

<div style="margin:0 auto; width: 634px; height:120px;">
<!-- "前のページへ" のアクション -->
<a class="prev browse left"></a>
 
<!-- スクロールのルート要素 -->
<div class="scrollable" id="scrollable">
 
  <!-- 項目のルート要素 -->
  <div class="items">
 
    <!-- 1-5 -->
    <div>
      <img src="./img/321464099_a7cfcb95cf_t.jpg" />
      <img src="./img/2796719087_c3ee89a730_t.jpg" />
      <img src="./img/244441862_08ec9b6b49_t.jpg" />
      <img src="./img/66523124_b468cf4978_t.jpg" />
    </div>

    <!-- 5-10 -->
    <div>
      <img src="./img/399223609_db47d35b7c_t.jpg" />
      <img src="./img/321464104_c010dbf34c_t.jpg" />
      <img src="./img/117346184_9760f3aabc_t.jpg" />
      <img src="./img/399232237_6928a527c1_t.jpg" />
    </div>

    <!-- 10-15 -->
    <div>
      <img src="./img/3323896446_3b87a8bf75_t.jpg" />
      <img src="./img/3323897466_e61624f6de_t.jpg" />
      <img src="./img/3323058611_d35c894fab_t.jpg" />
      <img src="./img/3323893254_3183671257_t.jpg" />
    </div>
 
  </div>
 
</div>
 
<!-- "次のページへ" のアクション -->
<a class="next browse right"></a>
</div>

Next/prev ボタン

scrollable ツールは、CSSクラス名が prev と next である 要素を検索し、自動的に seeking action をバインドします。 既存のCSSとの衝突を避けるために、CSSクラス名に別な名前を指定することができます。

CSS コード

この例では、2つのCSSファイルを使用しています: スクロールのための基本的な設定のための scrollable-horizontal.css と、 next/prev アクションボタンの scrollable-buttons.css です。

ここには、水平スクロールを可能にするための最小限のCSSの設定があります。 　width プロパティを除き、外観に影響を及ぼような設定は、なにも 　ありません。 　一度に多くの項目を表示したい場合は、width プロパティを調整 　しなければならないことになります。

/*
スクロールのルート要素。スクロールが発生した場合でも、
この要素はそのまま
*/
.scrollable {
  /* 必須な設定 */
  position:relative;
  overflow:hidden;
  width: 660px;
  height:90px;
}
 
/*
スクロール項目のルート要素。絶対的配置でなければならず、
スクロール項目に対応するために非常に大きな幅を持っている必要がある。
幅と高さをこの要素ではなく、ルート要素に設定するだけで十分です。
*/
.scrollable .items {
  /* this cannot be too large */
  width:20000em;
  position:absolute;
}
 
/*
a single item. must be floated in horizontal scrolling.  typically,
this element is the one that *you* will style the most.
*/
.items div {
  float:left;
}

CSSコーディングは、実際にスクロールを作るうえで最も難しい部分であり、基本的な理解 を越えたもの持つことをお勧めします。

JavaScript 設定

ここは、簡単な部分です。ただ単に、スクロール予定のページから要素を選択するだけです。 jQuery セレクタに、scrollable コンストラクタを 後続することで、これを実現しています。 このコンストラクタは、最初の引数としてコンフィギュレーション・オブジェクトを受け取り ますが、この最小限のセットアップでは、デフォルトの設定に従います。

$(function() {
  // initialize scrollable
  $(".scrollable").scrollable();
});