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