Scroll strategies

    Scroll strategies determines how the scrolling will be handled in the provided IgxOverlayService. There are four scroll strategies:

    1. NoOperation - does nothing.
    2. Block - the component do not scroll with the window. The event is canceled. No scrolling happens.
    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 method used to :

    • [initialize] (https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iscrollstrategy.html#initialize) - initializes the scroll strategy. It needs a reference to the document, overlay service and the id of the component rendered
    • [attach] (https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iscrollstrategy.html#attach) - attaches the scroll strategy to the specified element or to the document
    • [detach] (https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iscrollstrategy.html#detach) - detaches the scroll strategy
    this.scrollStrategy.initialize(document, overlayService, id);
this.scrollStrategy.attach();
this.scrollStrategy.detach();

    Getting Started

    The position strategy is passed as a property in the [overlaySettings] (https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html) parameter when the [overlay.show()] (https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxoverlayservice.html#show) 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
    }
    overlay.show(dummyElement, overlaySettings);

    To change the scroll strategy used by the overlay, override the [scrollStrategy] (https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iscrollstrategy.html) property of the [overlaySettings] (https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html) object passed to the overlay:

        // overlaySettings is an existing object of type OverlaySettings
    // to override the scroll strategy
    const newOverlaySettings = Object.assing({}, overlaySettings);
    Object.assing(newOverlaySettings, {
        scrollStrategy: new CloseScrollStrategy()
    })
    overlay.show(dummyElement, newOverlaySettings);

    Dependencies

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

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

    Demos

    Scroll Strategies

    The scroll strategies can be passed through the [overlaySettings] (https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html) object in order to determine how the overlay should handle scrolling. The demo below illustrates the difference between the separate [scrollStrategies] (https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iscrollstrategy.html):

    The [overlaySettings] (https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html) object also allows a boolean property, [modal] (https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html#modal), to be passed. This controls how the overlay will be display: If the [modal] (https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html#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] (https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html#modal) property is true, the element will be attached to the DOM foreground and an overlay blocked will wrap behind it, stopping propagation of all events:

    API References

    • [IScrollStrategy] (https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iscrollstrategy.html)