diff --git a/src/generators/nodes/Window.ts b/src/generators/nodes/Window.ts index c8b044bb2d..7a1f70376b 100644 --- a/src/generators/nodes/Window.ts +++ b/src/generators/nodes/Window.ts @@ -19,6 +19,11 @@ const associatedEvents = { scrollY: 'scroll', }; +const properties = { + scrollX: 'pageXOffset', + scrollY: 'pageYOffset' +}; + const readonly = new Set([ 'innerWidth', 'innerHeight', @@ -93,15 +98,16 @@ export default class Window extends Node { if (attribute.name === 'online') return; const associatedEvent = associatedEvents[attribute.name]; + const property = properties[attribute.name] || attribute.name; if (!events[associatedEvent]) events[associatedEvent] = []; events[associatedEvent].push( - `${attribute.value.name}: this.${attribute.name}` + `${attribute.value.name}: this.${property}` ); // add initial value generator.metaBindings.push( - `this._state.${attribute.value.name} = window.${attribute.name};` + `this._state.${attribute.value.name} = window.${property};` ); } }); @@ -158,10 +164,10 @@ export default class Window extends Node { clearTimeout(${timeout}); var x = ${bindings.scrollX ? `#component.get("${bindings.scrollX}")` - : `window.scrollX`}; + : `window.pageXOffset`}; var y = ${bindings.scrollY ? `#component.get("${bindings.scrollY}")` - : `window.scrollY`}; + : `window.pageYOffset`}; window.scrollTo(x, y); ${timeout} = setTimeout(${clear}, 100); } @@ -182,7 +188,7 @@ export default class Window extends Node { #component.observe("${bindings.scrollX || bindings.scrollY}", function(${isX ? 'x' : 'y'}) { ${lock} = true; clearTimeout(${timeout}); - window.scrollTo(${isX ? 'x, window.scrollY' : 'window.scrollX, y'}); + window.scrollTo(${isX ? 'x, window.pageYOffset' : 'window.pageXOffset, y'}); ${timeout} = setTimeout(${clear}, 100); }); `); diff --git a/test/js/samples/window-binding-scroll/expected-bundle.js b/test/js/samples/window-binding-scroll/expected-bundle.js index a7c9026cc6..8959769d1d 100644 --- a/test/js/samples/window-binding-scroll/expected-bundle.js +++ b/test/js/samples/window-binding-scroll/expected-bundle.js @@ -198,7 +198,7 @@ function create_main_fragment(component, state) { window_updating = true; component.set({ - y: this.scrollY + y: this.pageYOffset }); window_updating = false; } @@ -207,7 +207,7 @@ function create_main_fragment(component, state) { component.observe("y", function(y) { window_updating = true; clearTimeout(window_updating_timeout); - window.scrollTo(window.scrollX, y); + window.scrollTo(window.pageXOffset, y); window_updating_timeout = setTimeout(clear_window_updating, 100); }); @@ -243,7 +243,7 @@ function create_main_fragment(component, state) { function SvelteComponent(options) { init(this, options); this._state = assign({}, options.data); - this._state.y = window.scrollY; + this._state.y = window.pageYOffset; this._fragment = create_main_fragment(this, this._state); diff --git a/test/js/samples/window-binding-scroll/expected.js b/test/js/samples/window-binding-scroll/expected.js index aa265f4599..0c22523b61 100644 --- a/test/js/samples/window-binding-scroll/expected.js +++ b/test/js/samples/window-binding-scroll/expected.js @@ -9,7 +9,7 @@ function create_main_fragment(component, state) { window_updating = true; component.set({ - y: this.scrollY + y: this.pageYOffset }); window_updating = false; } @@ -18,7 +18,7 @@ function create_main_fragment(component, state) { component.observe("y", function(y) { window_updating = true; clearTimeout(window_updating_timeout); - window.scrollTo(window.scrollX, y); + window.scrollTo(window.pageXOffset, y); window_updating_timeout = setTimeout(clear_window_updating, 100); }); @@ -54,7 +54,7 @@ function create_main_fragment(component, state) { function SvelteComponent(options) { init(this, options); this._state = assign({}, options.data); - this._state.y = window.scrollY; + this._state.y = window.pageYOffset; this._fragment = create_main_fragment(this, this._state); diff --git a/test/runtime/samples/window-bind-scroll-update/_config.js b/test/runtime/samples/window-bind-scroll-update/_config.js index 3ae13c33ce..71a880e438 100644 --- a/test/runtime/samples/window-bind-scroll-update/_config.js +++ b/test/runtime/samples/window-bind-scroll-update/_config.js @@ -2,10 +2,10 @@ export default { skip: true, // JSDOM test ( assert, component, target, window ) { - assert.equal( window.scrollY, 0 ); + assert.equal( window.pageYOffset, 0 ); component.set({ scrollY: 100 }); - assert.equal( window.scrollY, 100 ); + assert.equal( window.pageYOffset, 100 ); component.destroy(); }