Estrategias de desplazamiento

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

    1. NoOperation: no hace nada.
    2. Bloquear: el evento se cancela y el componente no se desplaza con la ventana.
    3. Cerrar: utiliza una tolerancia y cierra un componente expandido al desplazarse si se excede la tolerancia.
    4. Absoluto: desplaza todo.

    Usage

    Cada estrategia de desplazamiento tiene los siguientes métodos:

    • 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

    Para utilizar cualquiera de las estrategias de desplazamiento, impórtelo así:

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

    Estrategias de desplazamiento

    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