File tree Expand file tree Collapse file tree 2 files changed +38
-3
lines changed Expand file tree Collapse file tree 2 files changed +38
-3
lines changed Original file line number Diff line number Diff line change @@ -136,6 +136,27 @@ describe('BlockScrollStrategy', () => {
136
136
expect ( document . documentElement . getBoundingClientRect ( ) . width ) . toBe ( previousContentWidth ) ;
137
137
} ) ;
138
138
139
+ it ( 'should not clobber user-defined scroll-behavior' , skipIOS ( ( ) => {
140
+ const root = document . documentElement ;
141
+ const body = document . body ;
142
+
143
+ root . style [ 'scrollBehavior' ] = body . style [ 'scrollBehavior' ] = 'smooth' ;
144
+
145
+ // Get the value via the style declaration in order to
146
+ // handle browsers that don't support the property yet.
147
+ const initialRootValue = root . style [ 'scrollBehavior' ] ;
148
+ const initialBodyValue = root . style [ 'scrollBehavior' ] ;
149
+
150
+ overlayRef . attach ( componentPortal ) ;
151
+ overlayRef . detach ( ) ;
152
+
153
+ expect ( root . style [ 'scrollBehavior' ] ) . toBe ( initialRootValue ) ;
154
+ expect ( body . style [ 'scrollBehavior' ] ) . toBe ( initialBodyValue ) ;
155
+
156
+ // Avoid bleeding styles into other tests.
157
+ root . style [ 'scrollBehavior' ] = body . style [ 'scrollBehavior' ] = '' ;
158
+ } ) ) ;
159
+
139
160
/**
140
161
* Skips the specified test, if it is being executed on iOS. This is necessary, because
141
162
* programmatic scrolling inside the Karma iframe doesn't work on iOS, which renders these
Original file line number Diff line number Diff line change @@ -45,11 +45,25 @@ export class BlockScrollStrategy implements ScrollStrategy {
45
45
/** Unblocks page-level scroll while the attached overlay is open. */
46
46
disable ( ) {
47
47
if ( this . _isEnabled ) {
48
+ const html = document . documentElement ;
49
+ const body = document . body ;
50
+ const previousHtmlScrollBehavior = html . style [ 'scrollBehavior' ] || '' ;
51
+ const previousBodyScrollBehavior = body . style [ 'scrollBehavior' ] || '' ;
52
+
48
53
this . _isEnabled = false ;
49
- document . documentElement . style . left = this . _previousHTMLStyles . left ;
50
- document . documentElement . style . top = this . _previousHTMLStyles . top ;
51
- document . documentElement . classList . remove ( 'cdk-global-scrollblock' ) ;
54
+
55
+ html . style . left = this . _previousHTMLStyles . left ;
56
+ html . style . top = this . _previousHTMLStyles . top ;
57
+ html . classList . remove ( 'cdk-global-scrollblock' ) ;
58
+
59
+ // Disable user-defined smooth scrolling temporarily while we restore the scroll position.
60
+ // See https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
61
+ html . style [ 'scrollBehavior' ] = body . style [ 'scrollBehavior' ] = 'auto' ;
62
+
52
63
window . scroll ( this . _previousScrollPosition . left , this . _previousScrollPosition . top ) ;
64
+
65
+ html . style [ 'scrollBehavior' ] = previousHtmlScrollBehavior ;
66
+ body . style [ 'scrollBehavior' ] = previousBodyScrollBehavior ;
53
67
}
54
68
}
55
69
You can’t perform that action at this time.
0 commit comments