Skip to content

Commit 4617a44

Browse files
crisbetojelbourn
authored andcommitted
docs: add a doc about the scroll strategies (#4630)
Adds a quick readme regarding the scroll strategies.
1 parent a17f9fd commit 4617a44

File tree

1 file changed

+27
-0
lines changed

1 file changed

+27
-0
lines changed
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Scroll strategies
2+
3+
## What is a scroll strategy?
4+
A scroll strategy is a class that describes how an overlay should behave if the user scrolls
5+
while the overlay is open. The strategy has a reference to the `OverlayRef`, allowing it to
6+
recalculate the position, close the overlay, block scrolling, etc.
7+
8+
## Usage
9+
To associate an overlay with a scroll strategy, you have to pass in a `ScrollStrategy` instance
10+
to the `OverlayState`. By default, all overlays will use the `NoopScrollStrategy` which doesn't
11+
do anything:
12+
13+
```ts
14+
let overlayState = new OverlayState();
15+
16+
overlayState.scrollStrategy = new BlockScrollStrategy(this._viewportRuler);
17+
this._overlay.create(overlayState).attach(yourPortal);
18+
```
19+
20+
## Creating a custom scroll strategy
21+
To set up a custom scroll strategy, you have to create a class that implements the `ScrollStrategy`
22+
interface. There are three stages of a scroll strategy's life cycle:
23+
24+
1. When an overlay is created, it'll call the strategy's `attach` method with a reference to itself.
25+
2. When an overlay is attached to the DOM, it'll call the `enable` method on its scroll strategy,
26+
3. When an overlay is detached from the DOM or destroyed, it'll call the `disable` method on its
27+
scroll strategy, allowing it to clean up after itself.

0 commit comments

Comments
 (0)