스크롤 전략

    The scroll strategy determines how the scrolling is handled in the provided IgxOverlayService. There are four scroll strategies:

    1. NoOperation- 아무 작업도 수행하지 않습니다.
    2. 차단- 이벤트가 취소되고 구성 요소가 창과 함께 스크롤되지 않습니다.
    3. 닫기- 허용 오차를 사용하고 허용 오차를 초과하는 경우 스크롤 시 확장된 구성 요소를 닫습니다.
    4. 절대- 모든 것을 스크롤합니다.

    Usage

    모든 스크롤 전략에는 다음과 같은 메서드가 있습니다.

    • initialize - initializes the scroll strategy. It needs a reference of the document, the overlay service and the id of the component rendered
    • attach - attaches the scroll strategy to the specified element or to the document
    • detach - detaches the scroll strategy
    this.scrollStrategy.initialize(document, overlayService, id);
this.scrollStrategy.attach();
this.scrollStrategy.detach();

    Getting Started

    The scroll strategy is passed as a property in the overlaySettings parameter when the overlay.attach() method is called:

    // 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);

    To change the scrolling strategy, used by the overlay, override the scrollStrategy property of the overlaySettings object passed to the overlay. If a strategy was already attached you should detach the previously generated 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);

    Dependencies

    스크롤 전략을 사용하려면 다음과 같이 가져옵니다.

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

    스크롤 전략

    The scroll strategies can be passed to the overlaySettings object to determine how the overlay should handle scrolling. The demo below illustrates the difference between the separate scrollStrategies:

    The overlaySettings object also allows a boolean property (modal) to be passed. This controls how the overlay will be displayed:

    • If the 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 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 References

    Additional Resources