このサイトで JavaScript が必要です。

バージョン

Is this content useful?

Thank you for your feedback!

Thank you for your feedback! You have rated this topic in the last 30 days.

igScroll の概要

このトピックの内容

このトピックは、以下のセクションで構成されます。

igScroll について

igScroll は、デスクトップ、ハイブリッド、およびモバイル環境でカスタムスクロールバーを有効にするスタンドアロン jQuery UI ウィジェットです。すべてのデバイスですべてのスクロールコンテナーの間に一貫性があるスクロールエクスペリエンスを作成できます。 igScroll は、2 つの異なる表示タイプ (ネイティブとカスタム) を指定でき、ネイティブスクロールバーまたはカスタムに作成するかによって選択できます。設定オプション。scrollbarType オプション。

カスタムスクロールバーには 3 つの状態があります。

非表示 - ユーザーがコンテナーやスクロールバーを操作していない場合、スクロールバーは非表示です。
デフォルト (thin) スクロールバー - ユーザーがスクロール可能なコンテナーやタッチインタラクション使用時など、スクロール可能なコンテンツ操作時にデフォルト (thin) スクロールバーが表示されます。水平または垂直の矢印はなく、マウスまたはタッチで操作できません。
デスクトップ (big) スクロールバー - ユーザーがスクロールバーをホバーしたときに表示されます。デフォルトのスクロールバーより大きく、矢印ボタンがありマウスを使用して操作できます。

ネイティブスクロールバーが有効な場合、特定のブラウザーと環境でデフォルトスクロールバーが表示されます。

スクロールはこの場合も igScroll で手動で処理され、igScroll のオプションで設定できます。

動作と可視化

環境が違う場合、スクロールに異なる可視化およびメソッドを提供します。igScroll は、以下の環境をサポートします。

デスクトップ - マウスでスクロールバーを移動、あるいはスクロールバーの矢印をクリックまたはマウススクロールによってスクロールできます。
モバイル - タッチ入力でのみスクロールできます (スマートフォン、タブレット)。
ハイブリッド - マウス入力とタッチ入力の両方をサポート (タッチモニターサポート付きデスクトップおよびラップトップ、Surface など)。

このセクションでは、igScroll の環境に固有な可視化と動作について説明します。

モバイルでの igScroll

モバイルデバイスでは、スクロールバーの表示にデフォルトスクロールバーが使用されます。モバイルではタッチ操作でスクロールします。スワイプによってコンテンツがスクロールされ、スクロールバーがそれに応じて同期されます。デフォルトで慣性が有効なため、最初はコンテンツを速くスクロールし、その後徐々にスピードが遅くなり、最後には停止します。この動作を inertiaDuration オプションで変更できます。

スクロールバーは以下の場合に表示されます。

ページが初めて読み込まれるとき。ユーザーにスクロール可能な領域を知らせるためにスクロールバーが短い時間表示されます。その後ユーザーが操作しない限り非表示のままになります。
ユーザーがスクロール可能なコンテンツ領域をタッチまたはスワイプしたとき。スクロールバーが表示されてユーザーがコンテンツを操作する間表示されたままになります。ユーザーが操作をやめると非表示になります。

igScroll デスクトップで使用

デスクトップには、幅の細いスクロールバーと大きなサイズのスクロールバーを表示できます。スクロール可能なコンテンツを操作 (マウスホイールによるホバー、スクロール) する場合、幅の細いスクロールバーが表示されます。

実際のスクロールバー領域をホバーすると詳細な操作が可能な大きなスクロールバーが表示されます。

大きなスクロールバーの操作可能な要素:

矢印ボタン

クリックして小さくスクロール、または長押しで継続的に同じ方向へスクロールできます。
トラックパッド (つまみと矢印ボタンの間の領域)。

トラックパッドをクリックして関連する方向へ大きくスクロールできます。
スクロールのつまみ要素

コンテンツをスクロールするためにつまみをドラッグアンドドロップできます。

大きなスクロールバーは、操作中は表示されたままになります。操作を停止すると非表示になり、幅の細いスクロールバーのみ表示されます。コンテンツ上をホバーしている間は幅の細いスクロールバーは表示されたままになります。スクロール可能な領域で操作またはホバーを停止した場合、すべてのスクロールバーが非表示になります。

ハイブリッドで igScroll を使用

ハイブリッドデバイスではタッチとマウスの両方がサポートされるため、キーボードサポートも上記 2 セクションで説明されたすべての操作で有効です。

DOM 構造

igScroll はデフォルトで DOM 構造を変更し、その他の CSS クラスに適用してスクロールバーのスタイルを設定します。

以下は DOM の初期構造です。

HTML の場合:

<body>
    <div id='scrollContent' style='width:600px; height: 400px; overflow:hidden;'>
        <h1> Some Title </h1>
        <p> Paragraph </p>
        <table> ... </table>
        ...
    </div>
</body>

div 要素 ( $("#scrollContent").igScroll() ) で igScroll を初期化した後に DOM は以下のようになります。

<body>
    <div id="scrollContent" style="width:600px; height: 400px; overflow:hidden;" class="igscroll-scrollable">
      <div id="scrollContent_container" class="igscroll-container" style="width: 600px; height: 400px;">
          <div id="scrollContent_content" class="igscroll-content">
              <h1> Some Title </h1>
              <p> Paragraph </p>
              <table>...</table>
              ...
          </div>
      </div>
    </div>
</body>

igScroll による DOM 操作は modifyDOM プロパティを false に設定して無効にできます。その場合、igScroll を正しく動作させるために同様の DOM 階層を作成し、コンテンツ要素で初期化してください。

HTML の場合:

<body>
<div>
   <div id='containerWrapper' style="width:600px; height:400px; overflow:hidden; position:relative;">
        <div id='scrContainer' style="width:600px; height:400px; overflow:hidden; position:absolute;">
            <div id='scrollContent' style="position:absolute;">
                  <h1> Some Title </h1>
                  <p> Paragraph </p>
                  <table>...</table>
                  ...
            </div>
        </div>
    </div>
</body>

以下は igScroll を scrContainer 要素で初期化する例です。

JavaScript の場合:

$(function () {
    $("#scrContainer").igScroll({
    modifyDOM: false
    });
});

igScroll を Web ページへ追加

次のステップは、いずれかの jQuery クライアントコードを使用して、ウェブページで igScroll ウィジェットを実装する基本的な方法を示します。

最初に、アプリケーションに必要なローカライズ済みのリソースを含めます。組み込むリソースの詳細は、「Ignite UI for jQuery で JavaScript リソースを使用」ヘルプトピックをご覧ください。

HTML ページに必要な JavaScript および CSS ファイルを参照してください。

HTML の場合:

<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.js" type="text/javascript"></script>
<script src="scripts/infragistics.core.js" type="text/javascript"></script>
<script src="scripts/infragistics.lob.js" type="text/javascript"></script>
<link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
<link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />

次に簡単なスクロール可能なりょいきを作成します。この例では、スクロール可能な長いテキストを含む div DOM 要素を作成します。

HTML の場合:

 <div id="scrollableContent" style="height:200px; width: 600px; overflow: hidden;">
     <div>
         <p>
         Lorem ipsum dolor sit amet, dicat maluisset urbanitas has id, consul admodum contentiones mel te. Nam paulo utinam qualisque         in, lorem definiebas theophrastus mea ex. <br/>
         Scripta sanctus definitionem qui at. Erat fugit dicit at sea, ne quo alia illud viris. <br/>
         Latine legendos ut eum. Usu purto nihil dolor ei, has et iriure scripta, ex antiopam electram duo. <br/>
         </p>
         Te ludus malorum periculis has, no veri dissentiet sea. <br/>
         Probo lucilius an vel, his eu purto falli, populo graecis postulant has at. <br/>
         Suas sale mediocritatem in vis. Has noster semper perpetua in. Sed ex nostrum temporibus, affert interpretaris no pro. <br/>
         <p>
         Cu eirmod omnesque offendit per, invidunt corrumpit intellegebat duo et. <br/>
         Sed ne sonet apeirian. Cum at clita molestie democritum, diam expetenda ius ei. <br/>
         In est sale tamquam reformidans, dolore ponderum ius et. Te sea mutat hendrerit, habeo noster vis ad. <br/>
         Quem feugiat feugait usu id. His utinam apeirian in, repudiare accommodare ex mea, id qui modo mazim eleifend. <br/>
         </p>
         Cum elitr ludus ut. Eu mel aliquando conceptam adolescens. <br/>
         Malis vitae labore vis ea, eam an error accumsan. <br/>
         Ceteros sapientem assentior mel at, graeco ancillae moderatius ea eum. <br/>
         Ei nam delenit admodum deterruisset. <br/>
         <p>
         Cum ad animal oblique, sensibus reprehendunt his te, quo ignota dictas no. <br/>
         Eu congue lucilius mei, has ei invenire platonem. Cu nonumy tamquam moderatius cum. <br/>
         At lucilius deterruisset vis, omnis minimum complectitur ea his. <br/>
         </p>
     </div>
 </div>

上記を設定後にオプションを使用またはデフォルト設定し、スクロール可能な領域で igScroll ウィジェットを初期化できます。

JavaScript の場合:
```
 $(function () {
     $("#scrollableContent").igScroll();
 });
```
Web ページを実行します。igScroll が初期化されてカスタムスクロールバーを表示します。

複数のコンテナーを一度にスクロール

igScroll が複数コンテナーのリンクを許可し、1 つスクロールされた場合に他も合わせてスクロールされます。同期要素を指定する 2 つのオプションがあります。

syncedElemsV - メインコンテンツコンテナーに垂直にリンクされる要素の設定を許可します。コンテンツが Y 軸でスクロールされる場合、それに応じてリンク要素が上下にスクロールします。
syncedElemsH - メインコンテンツコンテナーに水平にリンクされる要素の設定を許可します。コンテンツが X 軸でスクロールされる場合、それに応じてリンク要素が左右にスクロールします。

以下の手順は、いずれかの jQuery クライアントコードを使用して、一度に複数のコンテナーをスクロール可能な igScroll ウィジェットを実装する基本的な方法を示します。

手順:

上記の igScroll を Web ページへ追加セクションを説明します。

スクロール可能なコンテナーの追加

最初のコンテナーを左に配置します。

HTML の場合:

 <div style="width: 50%; float:left; position: relative;">
     <div id='scrContainerLeft' style="height:200px; overflow: hidden;">    
         <div style="width:900px; height: 400px;">
             <p>
             Lorem ipsum dolor sit amet, dicat maluisset urbanitas has id, consul admodum contentiones mel te. Nam paulo utinam qualisque in, lorem definiebas theophrastus mea ex. <br/>
             Scripta sanctus definitionem qui at. Erat fugit dicit at sea, ne quo alia illud viris. <br/>
             Latine legendos ut eum. Usu purto nihil dolor ei, has et iriure scripta, ex antiopam electram duo. <br/>
             </p>
             Te ludus malorum periculis has, no veri dissentiet sea. <br/>
             Probo lucilius an vel, his eu purto falli, populo graecis postulant has at. <br/>
             Suas sale mediocritatem in vis. Has noster semper perpetua in. Sed ex nostrum temporibus, affert interpretaris no pro. <br/>
             <p>
             Cu eirmod omnesque offendit per, invidunt corrumpit intellegebat duo et. <br/>
             Sed ne sonet apeirian. Cum at clita molestie democritum, diam expetenda ius ei. <br/>
             In est sale tamquam reformidans, dolore ponderum ius et. Te sea mutat hendrerit, habeo noster vis ad. <br/>
             Quem feugiat feugait usu id. His utinam apeirian in, repudiare accommodare ex mea, id qui modo mazim eleifend. <br/>
             </p>
             Cum elitr ludus ut. Eu mel aliquando conceptam adolescens. <br/>
             Malis vitae labore vis ea, eam an error accumsan. <br/>
             Ceteros sapientem assentior mel at, graeco ancillae moderatius ea eum. <br/>
             Ei nam delenit admodum deterruisset. <br/>
             <p>
             Cum ad animal oblique, sensibus reprehendunt his te, quo ignota dictas no. <br/>
             Eu congue lucilius mei, has ei invenire platonem. Cu nonumy tamquam moderatius cum. <br/>
             At lucilius deterruisset vis, omnis minimum complectitur ea his. <br/>
             </p>
         </div>
     </div>
 </div>

2 つ目のコンテナーを右に配置します。

HTML の場合:

 <div style="width: 50%; float:right; position: relative;" >
     <div id="scrContainerRight" style="height:200px;overflow: hidden;">
     <table style="border: 1px solid #777777; width:900px;">
         <thead>
         <th>Product ID</th>
         <th>Name</th>
         <th>Product Number</th>
         <th>Make</th>
         <th>Finished Goods</th>
         <th>Color</th>
         <th>Safety Stock Level</th>
         <th>Reorder Point</th>
         <th>Standard Const</th>
         <th>List Price</th>
         <th>Days to Manufacture</th>
         <th>Modified Date</th>
         </thead>
         <tbody>
             <tr><td>1</td><td>Adjustable Race</td><td>AR-5381</td><td>false</td><td>false</td><td>&nbsp;</td><td>1000</td><td>750</td><td>0</td><td>0</td><td>0</td><td>3/11/2004</td></tr>
             <tr><td>2</td><td>Bearing Ball</td><td>BA-8327</td><td>false</td><td>false</td><td>&nbsp;</td><td>1000</td><td>750</td><td>0</td><td>0</td><td>0</td><td>3/11/2004</td></tr>
             <tr><td>3</td><td>BB Ball Bearing</td><td>BE-2349</td><td>true</td><td>false</td><td>&nbsp;</td><td>800</td><td>600</td><td>0</td><td>0</td><td>1</td><td>3/11/2004</td></tr>
             <tr><td>4</td><td>Headset Ball Bearings</td><td>BE-2908</td><td>false</td><td>false</td><td>&nbsp;</td><td>800</td><td>600</td><td>0</td><td>0</td><td>0</td><td>3/11/2004</td></tr>
             <tr><td>316</td><td>Blade</td><td>BL-2036</td><td>true</td><td>false</td><td>&nbsp;</td><td>800</td><td>600</td><td>0</td><td>0</td><td>1</td><td>3/11/2004</td></tr>
             <tr><td>317</td><td>LL Crankarm</td><td>CA-5965</td><td>false</td><td>false</td><td>Black</td><td>500</td><td>375</td><td>0</td><td>0</td><td>0</td><td>3/11/2004</td></tr>
             <tr><td>318</td><td>ML Crankarm</td><td>CA-6738</td><td>false</td><td>false</td><td>Black</td><td>500</td><td>375</td><td>0</td><td>0</td><td>0</td><td>3/11/2004</td></tr>
             <tr><td>319</td><td>HL Crankarm</td><td>CA-7457</td><td>false</td><td>false</td><td>Black</td><td>500</td><td>375</td><td>0</td><td>0</td><td>0</td><td>3/11/2004</td></tr>
             <tr><td>320</td><td>Chainring Bolts</td><td>CB-2903</td><td>false</td><td>false</td><td>Silver</td><td>1000</td><td>750</td><td>0</td><td>0</td><td>0</td><td>3/11/2004</td></tr>    
             <tr><td>321</td><td>Chainring Nut</td><td>CN-6137</td><td>false</td><td>false</td><td>Silver</td><td>1000</td><td>750</td><td>0</td><td>0</td><td>0</td><td>3/11/2004</td></tr>
             <tr><td>322</td><td>Chainring</td><td>CR-7833</td><td>false</td><td>false</td><td>Black</td><td>1000</td><td>750</td><td>0</td><td>0</td><td>0</td><td>3/11/2004</td></tr>
             <tr><td>323</td><td>Crown Race</td><td>CR-9981</td><td>false</td><td>false</td><td>&nbsp;</td><td>1000</td><td>750</td><td>0</td><td>0</td><td>0</td><td>3/11/2004</td></tr>                
         </tbody>
     </table>
     </div>
 </div>

次に 2 つの igScrolls (各スクロール可能なコンテナー) を初期化し、syncedElemsV および syncedElemsH プロパティを各スクロールに設定します。

JavaScript の場合:
```
 $(function(){
     $("#scrContainerRight").igScroll({
         syncedElemsV: [$("#scrContainerLeft")],
         syncedElemsH: [$("#scrContainerLeft")]
     });

     $("#scrContainerLeft").igScroll({
         syncedElemsV: [$("#scrContainerRight")],
         syncedElemsH: [$("#scrContainerRight")]
     });
 });
```
両コンテナーで同期スクロールが有効になります。コンテナーの 1 つがスクロールされると他のコンテナーも同じ方向へ同じ量スクロールされます。
ブラウザーで結果を確認します。

注: modifyDOM を false に設定して実装した場合、syncedElemsV/syncedElemsH オプションのターゲット要素は、コンテナーラッパー要素ではなくコンテナー要素である必要があります。このトピックの DOM 構造セクションの modifyDOM:false の DOM 構造の例を参照してください。

キーボード操作

注: キーボードインタラクションを動作させるには、メインターゲット要素に tabIndex 属性を設定しフォーカス可能にする必要があります。

スクロール要素にフォーカスがある場合:

上/下矢印: 上下のスクロール
右/左矢印: 右左のスクロール
上/下矢印: 上下の継続スクロール
右/左矢印: 左右の継続スクロール
スペース: 上方向へ大きくスクロール
SHIFT+スペース: 下方向へ大きくスクロール
PAGE UP/ PAGE DOWN: 上下方向へ大きくスクロール

Ignite UI | ヘルプトピック

igScroll の概要

このトピックの内容

igScroll について

動作と可視化

モバイルでの igScroll

igScroll デスクトップで使用

ハイブリッドで igScroll を使用

DOM 構造

igScroll を Web ページへ追加

複数のコンテナーを一度にスクロール

キーボード操作

関連コンテンツ

トピック

サンプル

Ignite UI | ヘルプ トピック

igScroll の概要

このトピックの内容

igScroll について

動作と可視化

モバイルでの igScroll

igScroll デスクトップで使用

ハイブリッドで igScroll を使用

DOM 構造

igScroll を Web ページへ追加

複数のコンテナーを一度にスクロール

キーボード操作

関連コンテンツ

トピック

サンプル

Ignite UI | ヘルプトピック