Scroll Strategies

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

    1. NoOperation - does nothing.
    2. Block - the event is canceled and the component does not scroll with the window.
    3. Close - uses a tolerance and closes an expanded component upon scrolling if the tolerance is exceeded.
    4. Absolute - scrolls everything.

    Usage

    Every scroll strategy has the following methods:

    • 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

    To use the any of the scroll strategies, import it like this:

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

    Scroll Strategies

    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