diff --git a/packages/client/assets/tagcanvas.min.js b/packages/client/assets/tagcanvas.min.js index 526dec528d..60f5306807 100644 --- a/packages/client/assets/tagcanvas.min.js +++ b/packages/client/assets/tagcanvas.min.js @@ -968,8 +968,8 @@ a = c.documentElement, d = c.body, e = window, - h = e.pageXOffset || a.scrollLeft, - i = e.pageYOffset || a.scrollTop, + h = e.scrollX || a.scrollLeft, + i = e.scrollY || a.scrollTop, j = a.clientLeft || d.clientLeft, k = a.clientTop || d.clientTop; return { x: b.left + h - j, y: b.top + i - k }; diff --git a/packages/client/src/components/MkContextMenu.vue b/packages/client/src/components/MkContextMenu.vue index 42c9f74e1f..319f7fd0fe 100644 --- a/packages/client/src/components/MkContextMenu.vue +++ b/packages/client/src/components/MkContextMenu.vue @@ -39,12 +39,12 @@ onMounted(() => { const width = rootEl.value.offsetWidth; const height = rootEl.value.offsetHeight; - if (left + width - window.pageXOffset > window.innerWidth) { - left = window.innerWidth - width + window.pageXOffset; + if (left + width - window.scrollX > window.innerWidth) { + left = window.innerWidth - width + window.scrollX; } - if (top + height - window.pageYOffset > window.innerHeight) { - top = window.innerHeight - height + window.pageYOffset; + if (top + height - window.scrollY > window.innerHeight) { + top = window.innerHeight - height + window.scrollY; } if (top < 0) { diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue index 1c9a252dda..a0552ec18d 100644 --- a/packages/client/src/components/MkModal.vue +++ b/packages/client/src/components/MkModal.vue @@ -238,8 +238,8 @@ const align = () => { let left; let top; - const x = srcRect.left + (fixed.value ? 0 : window.pageXOffset); - const y = srcRect.top + (fixed.value ? 0 : window.pageYOffset); + const x = srcRect.left + (fixed.value ? 0 : window.scrollX); + const y = srcRect.top + (fixed.value ? 0 : window.scrollY); if (props.anchor.x === "center") { left = x + props.src.offsetWidth / 2 - width / 2; @@ -287,7 +287,7 @@ const align = () => { left = window.innerWidth - width + window.scrollX - 1; } - const underSpace = window.innerHeight - MARGIN - (top - window.pageYOffset); + const underSpace = window.innerHeight - MARGIN - (top - window.scrollY); const upperSpace = srcRect.top - MARGIN; // 画面から縦にはみ出る場合 @@ -300,7 +300,7 @@ const align = () => { top = window.scrollY + (upperSpace + MARGIN - height); } } else { - top = window.innerHeight - MARGIN - height + window.pageYOffset - 1; + top = window.innerHeight - MARGIN - height + window.scrollY - 1; } } else { maxHeight.value = underSpace; @@ -320,28 +320,21 @@ const align = () => { if ( top >= - srcRect.top + - props.src.offsetHeight + - (fixed.value ? 0 : window.pageYOffset) + srcRect.top + props.src.offsetHeight + (fixed.value ? 0 : window.scrollY) ) { transformOriginY = "top"; - } else if ( - top + height <= - srcRect.top + (fixed.value ? 0 : window.pageYOffset) - ) { + } else if (top + height <= srcRect.top + (fixed.value ? 0 : window.scrollY)) { transformOriginY = "bottom"; } if ( left >= - srcRect.left + - props.src.offsetWidth + - (fixed.value ? 0 : window.pageXOffset) + srcRect.left + props.src.offsetWidth + (fixed.value ? 0 : window.scrollX) ) { transformOriginX = "left"; } else if ( left + width <= - srcRect.left + (fixed.value ? 0 : window.pageXOffset) + srcRect.left + (fixed.value ? 0 : window.scrollX) ) { transformOriginX = "right"; } diff --git a/packages/client/src/components/MkUrlPreviewPopup.vue b/packages/client/src/components/MkUrlPreviewPopup.vue index 0f0ac1ec68..c5d64e0cf0 100644 --- a/packages/client/src/components/MkUrlPreviewPopup.vue +++ b/packages/client/src/components/MkUrlPreviewPopup.vue @@ -36,8 +36,8 @@ onMounted(() => { const rect = props.source.getBoundingClientRect(); const x = Math.max(rect.left + props.source.offsetWidth / 2 - 300 / 2, 6) + - window.pageXOffset; - const y = rect.top + props.source.offsetHeight + window.pageYOffset; + window.scrollX; + const y = rect.top + props.source.offsetHeight + window.scrollY; top.value = y; left.value = x; diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/MkUserPreview.vue index fe2ef8e3f2..aff822dbf9 100644 --- a/packages/client/src/components/MkUserPreview.vue +++ b/packages/client/src/components/MkUserPreview.vue @@ -66,9 +66,8 @@ onMounted(() => { } const rect = props.source.getBoundingClientRect(); - const x = - rect.left + props.source.offsetWidth / 2 - 300 / 2 + window.pageXOffset; - const y = rect.top + props.source.offsetHeight + window.pageYOffset; + const x = rect.left + props.source.offsetWidth / 2 - 300 / 2 + window.scrollX; + const y = rect.top + props.source.offsetHeight + window.scrollY; top.value = y; left.value = x; diff --git a/packages/client/src/scripts/popup-position.ts b/packages/client/src/scripts/popup-position.ts index 905e7bc716..658012bcc9 100644 --- a/packages/client/src/scripts/popup-position.ts +++ b/packages/client/src/scripts/popup-position.ts @@ -24,9 +24,8 @@ export function calcPopupPosition( let top: number; if (props.anchorElement) { - left = - rect.left + window.pageXOffset + props.anchorElement.offsetWidth / 2; - top = rect.top + window.pageYOffset - contentHeight - props.innerMargin; + left = rect.left + window.scrollX + props.anchorElement.offsetWidth / 2; + top = rect.top + window.scrollY - contentHeight - props.innerMargin; } else { left = props.x; top = props.y - contentHeight - props.innerMargin; @@ -34,8 +33,8 @@ export function calcPopupPosition( left -= el.offsetWidth / 2; - if (left + contentWidth - window.pageXOffset > window.innerWidth) { - left = window.innerWidth - contentWidth + window.pageXOffset - 1; + if (left + contentWidth - window.scrollX > window.innerWidth) { + left = window.innerWidth - contentWidth + window.scrollX - 1; } return [left, top]; @@ -46,11 +45,10 @@ export function calcPopupPosition( let top: number; if (props.anchorElement) { - left = - rect.left + window.pageXOffset + props.anchorElement.offsetWidth / 2; + left = rect.left + window.scrollX + props.anchorElement.offsetWidth / 2; top = rect.top + - window.pageYOffset + + window.scrollY + props.anchorElement.offsetHeight + props.innerMargin; } else { @@ -60,8 +58,8 @@ export function calcPopupPosition( left -= el.offsetWidth / 2; - if (left + contentWidth - window.pageXOffset > window.innerWidth) { - left = window.innerWidth - contentWidth + window.pageXOffset - 1; + if (left + contentWidth - window.scrollX > window.innerWidth) { + left = window.innerWidth - contentWidth + window.scrollX - 1; } return [left, top]; @@ -72,9 +70,8 @@ export function calcPopupPosition( let top: number; if (props.anchorElement) { - left = rect.left + window.pageXOffset - contentWidth - props.innerMargin; - top = - rect.top + window.pageYOffset + props.anchorElement.offsetHeight / 2; + left = rect.left + window.scrollX - contentWidth - props.innerMargin; + top = rect.top + window.scrollY + props.anchorElement.offsetHeight / 2; } else { left = props.x - contentWidth - props.innerMargin; top = props.y; @@ -82,8 +79,8 @@ export function calcPopupPosition( top -= el.offsetHeight / 2; - if (top + contentHeight - window.pageYOffset > window.innerHeight) { - top = window.innerHeight - contentHeight + window.pageYOffset - 1; + if (top + contentHeight - window.scrollY > window.innerHeight) { + top = window.innerHeight - contentHeight + window.scrollY - 1; } return [left, top]; @@ -97,18 +94,17 @@ export function calcPopupPosition( left = rect.left + props.anchorElement.offsetWidth + - window.pageXOffset + + window.scrollX + props.innerMargin; if (props.align === "top") { - top = rect.top + window.pageYOffset; + top = rect.top + window.scrollY; if (props.alignOffset != null) top += props.alignOffset; } else if (props.align === "bottom") { // TODO } else { // center - top = - rect.top + window.pageYOffset + props.anchorElement.offsetHeight / 2; + top = rect.top + window.scrollY + props.anchorElement.offsetHeight / 2; top -= el.offsetHeight / 2; } } else { @@ -117,8 +113,8 @@ export function calcPopupPosition( top -= el.offsetHeight / 2; } - if (top + contentHeight - window.pageYOffset > window.innerHeight) { - top = window.innerHeight - contentHeight + window.pageYOffset - 1; + if (top + contentHeight - window.scrollY > window.innerHeight) { + top = window.innerHeight - contentHeight + window.scrollY - 1; } return [left, top]; @@ -134,7 +130,7 @@ export function calcPopupPosition( const [left, top] = calcPosWhenTop(); // ツールチップを上に向かって表示するスペースがなければ下に向かって出す - if (top - window.pageYOffset < 0) { + if (top - window.scrollY < 0) { const [left, top] = calcPosWhenBottom(); return { left, top, transformOrigin: "center top" }; } @@ -152,7 +148,7 @@ export function calcPopupPosition( const [left, top] = calcPosWhenLeft(); // ツールチップを左に向かって表示するスペースがなければ右に向かって出す - if (left - window.pageXOffset < 0) { + if (left - window.scrollX < 0) { const [left, top] = calcPosWhenRight(); return { left, top, transformOrigin: "left center" }; } diff --git a/packages/client/src/scripts/use-chart-tooltip.ts b/packages/client/src/scripts/use-chart-tooltip.ts index 5d50fd41df..573b5b4c7c 100644 --- a/packages/client/src/scripts/use-chart-tooltip.ts +++ b/packages/client/src/scripts/use-chart-tooltip.ts @@ -50,11 +50,11 @@ export function useChartTooltip( const rect = context.chart.canvas.getBoundingClientRect(); tooltipShowing.value = true; - tooltipX.value = rect.left + window.pageXOffset + context.tooltip.caretX; + tooltipX.value = rect.left + window.scrollX + context.tooltip.caretX; if (opts.position === "top") { - tooltipY.value = rect.top + window.pageYOffset; + tooltipY.value = rect.top + window.scrollY; } else if (opts.position === "middle") { - tooltipY.value = rect.top + window.pageYOffset + context.tooltip.caretY; + tooltipY.value = rect.top + window.scrollY + context.tooltip.caretY; } }