Open Source

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

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

NoOperation - 何もしません。
Block - イベントはキャンセルされ、コンポーネントはウィンドウと共にスクロールしません。
Close - 許容値を使用して許容範囲を超えた場合にスクロールで展開したコンポーネントを閉じます。
Absolute - すべてをスクロールします。
NoOperation - does nothing.
Block - the event is canceled and the component does not scroll with the window.
Close - uses a tolerance and closes an expanded component upon scrolling if the tolerance is exceeded.
Absolute - scrolls everything.

使用方法

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

IScrollStrategy.initialize - スクロール方法を初期化します。ドキュメントへの参照、オーバーレイサービスへの参照、および描画されるコンポーネントの id が必要です。
IScrollStrategy.attach - スクロール方法を指定した要素またはドキュメントにアタッチします。
IScrollStrategy.detach - スクロール方法をデタッチします。
IScrollStrategy.initialize - initializes the scroll strategy. It needs a reference of the document, the overlay service and the id of the component rendered
IScrollStrategy.attach - attaches the scroll strategy to the specified element or to the document
IScrollStrategy.detach - detaches the scroll strategy

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 オブジェクトの IScrollStrategy プロパティをオーバーライドします。ストラテジがすでにアタッチされている場合は、以前に生成された 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 オブジェクトによって渡すことができます。以下のデモは複数の IScrollStrategy を紹介します。

モーダル

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

OverlaySettings.modal プロパティが false の場合、要素は DOM 前景にアタッチされますが、すべての要素がまだアクティブで操作可能 (スクロール、クリックなど) です。
OverlaySettings.modal プロパティが true の場合、要素が DOM 前景にアタッチされ、背景の要素が非アクティブなため操作不能となり、すべてのイベントが中止されます。
If the OverlaySettings.modal property is false, the element will be attached to the DOM foreground but everything will still be active and interactable - e.g. scrolling, clicking, etc.
If the OverlaySettings.modal property is true, the element will be attached to the DOM foreground and an overlay blocker will wrap behind it, stopping propagation of all events:

API リファレンス

IScrollStrategy

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