Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-scroll below:

Angular Overlay Service - Scroll Strategies

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

1. NoOperation - does nothing.
2. Block - the event is canceled and the component does not scroll with the window.
3. Close - uses a tolerance and closes an expanded component upon scrolling if the tolerance is exceeded.
4. Absolute - scrolls everything.

Every scroll strategy has the following methods:

• 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();

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

To use the any of the scroll strategies, import it like this:

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

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:

• IScrollStrategy

• Overlay Main Topic
• Position strategies
• Styling Topic
• IgxOverlayService
• IgxOverlay Styles

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4