Estrategias de desplazamiento

    La estrategia de desplazamiento determina cómo se maneja el desplazamiento en el IgxOverlayService proporcionado. Hay cuatro estrategias de desplazamiento:

    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: inicializa la estrategia de desplazamiento. Necesita una referencia del documento, el servicio de superposición y la identificación del componente representado.
    • attach: adjunta la estrategia de desplazamiento al elemento especificado o al documento
    • detach: separa la estrategia de desplazamiento
    this.scrollStrategy.initialize(document, overlayService, id);
this.scrollStrategy.attach();
this.scrollStrategy.detach();

    Getting Started

    La estrategia de desplazamiento se pasa como una propiedad en el parámetro overlaySettings cuando se llama al método overlay.attach():

    // 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);

    Para cambiar la estrategia de desplazamiento utilizada por la superposición, anule la propiedad scrollStrategy del objeto overlaySettings pasado a la superposición. Si ya se adjuntó una estrategia, debe separar el ID generado anteriormente:

    // 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

    Las estrategias de desplazamiento se pueden pasar al objeto overlaySettings para determinar cómo la superposición debe manejar el desplazamiento. La siguiente demostración ilustra la diferencia entre las scrollStrategies independientes:

    El objeto overlaySettings también permite pasar una propiedad booleana (modal). Esto controla cómo se mostrará la superposición:

    • Si la propiedad modal es false, el elemento se adjuntará al primer plano del DOM pero todo seguirá activo e interactuable (por ejemplo, desplazarse, hacer clic, etc.).
    • Si la propiedad modal es true, el elemento se adjuntará al primer plano del DOM y un bloqueador de superposición se colocará detrás de él, deteniendo la propagación de todos los eventos:

    API References

    Additional Resources