スクロール ストラテジ (スクロール方法)

    スクロール方法は指定された IgxOverlayService でスクロールを処理する方法を決定します。4 つのスクロール方法があります。

    1. NoOperation - 何もしません。
    2. Block - イベントはキャンセルされ、コンポーネントはウィンドウと共にスクロールしません。
    3. Close - 許容値を使用して許容範囲を超えた場合にスクロールで展開したコンポーネントを閉じます。
    4. Absolute - すべてをスクロールします。

    使用方法

    各スクロール方法は以下のメソッドがあります。

    • initialize - スクロール方法を初期化します。ドキュメントへの参照、オーバーレイ サービスへの参照、および描画されるコンポーネントの id が必要です。
    • attach - スクロール方法を指定した要素またはドキュメントにアタッチします。
    • detach - スクロール方法をデタッチします。
    this.scrollStrategy.initialize(document, overlayService, id);
this.scrollStrategy.attach();
this.scrollStrategy.detach();

    作業の開始

    ポジション ストラテジは、overlay.attach() メソッドが呼ばれたときに overlaySettings パラメーターのプロパティとして渡されます。

    // Initializing and using overlay settings
const overlaySettings: OverlaySettings = {
    positionStrategy: new GlobalPositionStrategy(),
    scrollStrategy: new AbsoluteScrollStrategy(), //Passes the scroll strategy
    modal: true,
    closeOnOutsideClick: true
}
const overlayId = overlay.attach(dummyElement, overlaySettings);

    オーバーレイで使用するスクロール方法の変更は、オーバーレイに渡される [overlaySettings] (https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html) オブジェクトの [scrollStrategy] (https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iscrollstrategy.html) プロパティをオーバーライドします。ストラテジがすでにアタッチされている場合は、以前に生成された ID をデタッチする必要があります:

    // overlaySettings is an existing object of type OverlaySettings
// to override the scroll strategy
const newOverlaySettings = Object.assing({}, overlaySettings);
Object.assing(newOverlaySettings, {
    scrollStrategy: new CloseScrollStrategy()
})
const overlayId = overlay.attach(dummyElement, newOverlaySettings);
overlay.show(overlayId);

    依存関係

    以下は、スクロール ストラテジをインポートする方法です。

    import { NoOpScrollStrategy } from "./scroll/NoOpScrollStrategy";

    スクロール方法

    オーバーレイのスクロールの処理方法を決定するためにスクロール方法を overlaySettings オブジェクトによって渡すことができます。 以下のデモは複数の scrollStrategies を紹介します。

    モーダル

    overlaySettings オブジェクトにブール値 (modal) を渡すことができます。これはオーバーレイが表示される方法を制御します。

    • modal プロパティが false の場合、要素は DOM 前景にアタッチされますが、すべての要素がまだアクティブで操作可能 (スクロール、クリックなど) です。
    • modal プロパティが true の場合、要素が DOM 前景にアタッチされ、背景の要素が非アクティブなため操作不能となり、すべてのイベントが中止されます。

    API リファレンス

    その他のリソース