skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(block-scroll-strategy): disable smooth scrolling before restoring scroll position (#8132)

Browse Source 
Disables user-defined `scroll-behavior: smooth` before restoring the scroll position when disabling the `BlockScrollStrategy`, which prevents browsers from animating the scroll position change.

Fixes #7139.
This commit is contained in:
Kristiyan Kostadinov
2017-11-02 04:21:02 +01:00
committed by Andrew Seguin
parent 9e4c636821
commit 75bccde374
2 changed files with 38 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/cdk/overlay/scroll/block-scroll-strategy.spec.ts
+21
View File
@@ -136,6 +136,27 @@ describe('BlockScrollStrategy', () => {
expect(document.documentElement.getBoundingClientRect().width).toBe(previousContentWidth);
});
it('should not clobber user-defined scroll-behavior', skipIOS(() => {
const root = document.documentElement;
const body = document.body;
root.style['scrollBehavior'] = body.style['scrollBehavior'] = 'smooth';
// Get the value via the style declaration in order to
// handle browsers that don't support the property yet.
const initialRootValue = root.style['scrollBehavior'];
const initialBodyValue = root.style['scrollBehavior'];
overlayRef.attach(componentPortal);
overlayRef.detach();
expect(root.style['scrollBehavior']).toBe(initialRootValue);
expect(body.style['scrollBehavior']).toBe(initialBodyValue);
// Avoid bleeding styles into other tests.
root.style['scrollBehavior'] = body.style['scrollBehavior'] = '';
}));
/**
* Skips the specified test, if it is being executed on iOS. This is necessary, because
* programmatic scrolling inside the Karma iframe doesn't work on iOS, which renders these
src/cdk/overlay/scroll/block-scroll-strategy.ts
+17 -3
View File
@@ -45,11 +45,25 @@ export class BlockScrollStrategy implements ScrollStrategy {
/** Unblocks page-level scroll while the attached overlay is open. */
disable() {
if (this._isEnabled) {
const html = document.documentElement;
const body = document.body;
const previousHtmlScrollBehavior = html.style['scrollBehavior'] || '';
const previousBodyScrollBehavior = body.style['scrollBehavior'] || '';
this._isEnabled = false;
document.documentElement.style.left = this._previousHTMLStyles.left;
document.documentElement.style.top = this._previousHTMLStyles.top;
document.documentElement.classList.remove('cdk-global-scrollblock');
html.style.left = this._previousHTMLStyles.left;
html.style.top = this._previousHTMLStyles.top;
html.classList.remove('cdk-global-scrollblock');
// Disable user-defined smooth scrolling temporarily while we restore the scroll position.
// See https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
html.style['scrollBehavior'] = body.style['scrollBehavior'] = 'auto';
window.scroll(this._previousScrollPosition.left, this._previousScrollPosition.top);
html.style['scrollBehavior'] = previousHtmlScrollBehavior;
body.style['scrollBehavior'] = previousBodyScrollBehavior;
}
}