스크롤 전략

    스크롤 전략은 제공IgxOverlayService 된 자료에서 스크롤을 어떻게 처리하는지를 결정합니다. 스크롤 전략은 네 가지가 있습니다:

    1. NoOperation- 아무 작업도 수행하지 않습니다.
    2. 차단- 이벤트가 취소되고 구성 요소가 창과 함께 스크롤되지 않습니다.
    3. 닫기- 허용 오차를 사용하고 허용 오차를 초과하는 경우 스크롤 시 확장된 구성 요소를 닫습니다.
    4. 절대- 모든 것을 스크롤합니다.

    Usage

    모든 스크롤 전략에는 다음과 같은 메서드가 있습니다.

    • initialize- 스크롤 전략을 초기화합니다. 문서, 오버레이 서비스, 그리고 제공되는 컴포넌트의 ID에 대한 참조가 필요합니다
    • attach- 스크롤 전략을 지정된 요소나 문서에 부착
    • detach- 스크롤 전략을 분리한다
    this.scrollStrategy.initialize(document, overlayService, id);
this.scrollStrategy.attach();
this.scrollStrategy.detach();

    Getting Started

    스크롤 전략은 메서드가 호출될 때overlaySettings 매개변수 내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);

    오버레이에서 사용하는 스크롤 전략을 변경하려면, 오버레이에 전달된scrollStrategy 객체의 속성을 덮overlaySettings 어쓰세요. 이미 전략이 첨부되어 있다면 이전에 생성된 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

    스크롤 전략을 사용하려면 다음과 같이 가져옵니다.

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

    스크롤 전략

    스크롤 전략을 객체에overlaySettings 전달하여 오버레이가 스크롤을 어떻게 처리할지 결정할 수 있습니다. 아래 데모는 두 가지 별개의scrollStrategies 차이점을 보여줍니다:

    이 객체는overlaySettings 불리언 속성(modal)도 전달할 수 있게 합니다. 이 기능은 오버레이가 어떻게 표시될지 제어합니다:

    • 만약 속성이modal 활성화false 되어 있다면, 요소는 DOM 전경에 붙어 있지만, 스크롤, 클릭 등 모든 동작은 여전히 활성화되고 상호작용 가능합니다.
    • 속성이modal 해당 특성이라true 면, 요소는 DOM 전경에 부착되고 오버레이 차단기가 그 뒤에 감싸여 모든 이벤트의 전파를 멈춥니다:

    API References

    Additional Resources