Skip to content

Commit d3ed8bb

Browse files
committed
fix(fullsize): restore page scroll position after exiting fullsize
Entering global fullsize sets position:fixed on <html>, which makes the browser reset the page scroll to the top. That offset was never restored, so closing fullsize left the page scrolled to the top. Save the scroll position on enter and restore it with window.scrollTo() on exit. Fixes #1255
1 parent 1bb6107 commit d3ed8bb

3 files changed

Lines changed: 51 additions & 0 deletions

File tree

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313

1414
#### :bug: Bug Fix
1515

16+
- **Fullsize / global fullscreen**: exiting fullsize scrolled the whole page back to the top. Entering global fullsize puts `<html>` into `position: fixed`, which makes the browser reset the page scroll to `0`; that position was never restored on exit. The scroll offset is now saved when entering fullsize and restored with `window.scrollTo()` when leaving it. Fixes [#1255](https://github.com/xdan/jodit/issues/1255).
1617
- **Scroll into view / Search**: `inView` (used by `scrollIntoViewIfNeeded`) only checked that an element wasn't below the viewport bottom, not that it wasn't above the top. An element scrolled **above** the visible area was therefore reported as visible, so navigating to it never scrolled — most visibly, cycling through search results and wrapping around to a match near the top of the page did not scroll up to it. `inView` now also requires the element's bottom to be at or below the viewport top. Fixes [#1279](https://github.com/xdan/jodit/issues/1279).
1718

1819
#### :rocket: New Feature

src/plugins/fullsize/fullsize.test.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,42 @@
55
*/
66

77
describe('Fullsize plugin', function () {
8+
// https://github.com/xdan/jodit/issues/1255
9+
describe('Restore page scroll after exiting fullsize (#1255)', function () {
10+
let spacer;
11+
12+
beforeEach(() => {
13+
spacer = document.createElement('div');
14+
spacer.style.cssText = 'height:10000px';
15+
document.body.appendChild(spacer);
16+
});
17+
18+
afterEach(() => {
19+
spacer.remove();
20+
window.scrollTo(0, 0);
21+
});
22+
23+
it('Should restore the page scroll position after closing fullsize', () => {
24+
const editor = getJodit({ globalFullSize: true });
25+
26+
window.scrollTo(0, 500);
27+
const before = window.scrollY;
28+
expect(before).equals(500);
29+
30+
editor.toggleFullSize(true);
31+
32+
// entering fullsize puts <html> into position:fixed,
33+
// which the browser scrolls back to the top
34+
expect(window.scrollY).equals(0);
35+
36+
editor.toggleFullSize(false);
37+
38+
expect(window.scrollY).equals(before);
39+
40+
editor.destruct();
41+
});
42+
});
43+
844
describe('Resize window while in fullsize (#1278)', function () {
945
it('Should restore the original width after exiting fullsize', () => {
1046
const editor = getJodit();

src/plugins/fullsize/fullsize.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ export function fullsize(editor: IViewWithToolbar): void {
3232
let isEnabled: boolean = false,
3333
oldHeight: number = 0,
3434
oldWidth: number = 0,
35+
savedScrollLeft: number = 0,
36+
savedScrollTop: number = 0,
3537
wasToggled = false;
3638

3739
const resize = (): void => {
@@ -105,6 +107,14 @@ export function fullsize(editor: IViewWithToolbar): void {
105107
(fullsizeStack.size === 0 && !enable));
106108

107109
if (shouldToggleGlobalFullsize) {
110+
// Entering fullsize sets `position: fixed` on <html>, which
111+
// makes the browser reset the page scroll to the top. Remember
112+
// the scroll position so it can be restored on exit (#1255).
113+
if (enable) {
114+
savedScrollLeft = editor.ow.scrollX;
115+
savedScrollTop = editor.ow.scrollY;
116+
}
117+
108118
let node = container.parentNode as HTMLElement;
109119

110120
while (
@@ -117,6 +127,10 @@ export function fullsize(editor: IViewWithToolbar): void {
117127
}
118128

119129
resize();
130+
131+
if (!enable) {
132+
editor.ow.scrollTo(savedScrollLeft, savedScrollTop);
133+
}
120134
}
121135

122136
events.fire('afterResize');

0 commit comments

Comments
 (0)