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

    スクロール方法は指定された 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 オブジェクトの scrollStrategy プロパティをオーバーライドします。ストラテジーがすでにアタッチされている場合は、以前に生成された 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 リファレンス

    その他のリソース