Estratégias de rolagem

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

    1. NoOperation- não faz nada.
    2. Bloquear- o evento é cancelado e o componente não rola com a janela.
    3. Fechar- usa uma tolerância e fecha um componente expandido ao rolar se a tolerância for excedida.
    4. Absoluto- rola tudo.

    Usage

    Cada estratégia de rolagem tem os seguintes 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 usar qualquer uma das estratégias de rolagem, importe-a assim:

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

    Estratégias de rolagem

    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