스크롤 전략

스크롤 전략은 제공된 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

스크롤 전략은 overlay.attach() 메서드가 호출될 때 overlaySettings 변수의 속성으로 전달됩니다.

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

오버레이에서 사용되는 스크롤 전략을 변경하려면 오버레이에 전달된 overlaySettings 객체의 scrollStrategy 속성을 재정의하세요. 전략이 이미 연결된 경우 이전에 생성된 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 간의 차이점을 보여줍니다.

Modal

​overlaySettings 객체를 사용하면 부울 속성(modal)을 전달할 수도 있습니다. 오버레이 표시 방법을 제어합니다.

• ​modal 속성이 false 인 경우 요소는 DOM 전경에 연결되지만 모든 항목은 여전히 활성화되어 상호 작용할 수 있습니다(예: 스크롤, 클릭 등).
• ​modal 속성이 true 이면 요소가 DOM 전경에 연결되고 오버레이 차단기가 그 뒤에 래핑되어 모든 이벤트의 전파를 중지합니다.

API References

• IScroll전략

Additional Resources

• 오버레이 주요 주제
• 포지션 전략
• 스타일링 주제
• Igx오버레이서비스
• Igx오버레이 스타일