ui:scrollerWrapper

ui:scrollerWrapper は、Salesforce アプリケーションでネイティブのスクロールを有効にするコンテナを作成します。このコンポーネントを使用すると、コンテナ内の複数のスクローラをネストできます。class 属性を使用して、コンテナの高さと幅を定義します。スクロールを有効にするには、コンテンツよりも低い高さを指定します。

次の例では、300 ピクセルの高さのスクロール可能な領域を作成します。

1<aura:component>
2    <ui:scrollerWrapper class="scrollerSize">
3        <!--Scrollable content here -->
4    </ui:scrollerWrapper>
5</aura:component>
6
7/** CSS **/
8.THIS.scrollerSize {
9    height: 300px;
10}

Lightning Design System の scrollable クラスは、モバイルデバイスのネイティブスクロールと互換性がありません。Salesforce for Android、Salesforce for iOS、Salesforce モバイル Web でスクロールを有効にする必要がある場合は ui:scrollerWrapper を使用します。

モバイルデバイスの Google Chrome では、border-radius CSS プロパティがゼロ以外の値に設定されていると、ネストされた ui:scrollerWrapper コンポーネントはスクロールできません。この場合、スクロールを有効にするには、外側の ui:scrollerWrapper コンポーネントの border-radius をゼロ以外の値に設定します。

次に例を示します。

1<aura:component>
2    <ui:scrollerWrapper class="outerScroller">
3        <!-- Scrollable content here -->
4        <ui:scrollerWrapper class="innerScroller">
5            <!-- Scrollable content here -->
6        </ui:scrollerWrapper>
7        <!-- Scrollable content here -->
8    </ui:scrollerWrapper>
9</aura:component>
10
11/** CSS **/
12.THIS.outerScroller {
13    /* fix innerScroller not scrollable */
14    border-radius: 1px;
15}
16.THIS.innerScroller {
17    /* make innerScroller rounded */
18    border-radius: 10px;
19}

このコンポーネントは、次のメソッドをサポートします。

scrollTo(destination, xcoord, ycoord): 指定された場所までコンテンツをスクロールします。

• destination (String): ターゲットの場所。有効な値: custom、top、bottom、left、right。カスタムの場所の場合、xcoord と ycoord を使用してターゲットの場所を決定します。
• xcoord (Integer): カスタムの場所の X 座標。デフォルト値は 0 です。
• ycoord (Integer): カスタムの場所の Y 座標。デフォルト値は 0 です。