diff --git a/src/editor/setPosition.js b/src/editor/setPosition.js index f199448..01cd74a 100644 --- a/src/editor/setPosition.js +++ b/src/editor/setPosition.js @@ -1,8 +1,8 @@ /** Sets the editor position and determines a proper orientation **/ const setPosition = (wrapperEl, editorEl, selectedEl) => { - // Container element offset + // Container element offset const containerBounds = wrapperEl.getBoundingClientRect(); - const { scrollX, scrollY } = window; + const { pageXOffset, pageYOffset } = window; // Re-set orientation class editorEl.className = 'r6o-editor'; @@ -13,20 +13,20 @@ const setPosition = (wrapperEl, editorEl, selectedEl) => { // Default orientation const { left, top, right, height } = selectedEl.getBoundingClientRect(); editorEl.style.top = `${top + height - containerBounds.top}px`; - editorEl.style.left = `${left + scrollX - containerBounds.left}px`; + editorEl.style.left = `${left + pageXOffset - containerBounds.left}px`; const defaultOrientation = editorEl.getBoundingClientRect(); if (defaultOrientation.right > window.innerWidth) { // Default bounds clipped - flip horizontally editorEl.classList.add('align-right'); - editorEl.style.left = `${right - defaultOrientation.width + scrollX - containerBounds.left}px`; + editorEl.style.left = `${right - defaultOrientation.width + pageXOffset - containerBounds.left}px`; } if (defaultOrientation.bottom > window.innerHeight) { // Flip vertically - const annotationTop = top + scrollY; // Annotation bottom relative to parents - const containerHeight = containerBounds.bottom + scrollY; + const annotationTop = top + pageYOffset; // Annotation bottom relative to parents + const containerHeight = containerBounds.bottom + pageYOffset; editorEl.classList.add('align-bottom'); editorEl.style.top = 'auto';