packages/frontend/src/components/MkTooltip.vue

@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, shallowRef, watch } from 'vue';
+import { nextTick, onMounted, onUnmounted, shallowRef } from 'vue';
 import * as os from '@/os.js';
 import { calcPopupPosition } from '@/scripts/popup-position.js';
 import { defaultStore } from '@/store.js';
@@ -70,7 +70,7 @@ function setPosition() {
 	el.value.style.top = data.top + 'px';
 }
 
-let loopHandler: number | undefined;
+let loopHandler;
 
 onMounted(() => {
 	nextTick(() => {
@@ -81,23 +81,12 @@ onMounted(() => {
 			loopHandler = window.requestAnimationFrame(loop);
 		};
 
-		watch(() => props.showing, show => {
-			if (show) {
-				if (!loopHandler) {
-					loop();
-				}
-			} else if (loopHandler) {
-				window.cancelAnimationFrame(loopHandler);
-				loopHandler = undefined;
-			}
-		});
+		loop();
 	});
 });
 
 onUnmounted(() => {
-	if (loopHandler) {
-		window.cancelAnimationFrame(loopHandler);
-	}
+	window.cancelAnimationFrame(loopHandler);
 });
 </script>
 

packages/frontend/src/pages/user/home.vue

@@ -225,7 +225,7 @@ import MkTextarea from '@/components/MkTextarea.vue';
 import MkOmit from '@/components/MkOmit.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkButton from '@/components/MkButton.vue';
-import { getScrollContainer } from '@/scripts/scroll.js';
+import { getScrollPosition } from '@/scripts/scroll.js';
 import { getUserMenu } from '@/scripts/get-user-menu.js';
 import number from '@/filters/number.js';
 import { userPage } from '@/filters/user.js';
@@ -282,7 +282,6 @@ const isEditingMemo = ref(false);
 const moderationNote = ref(props.user.moderationNote);
 const editModerationNote = ref(false);
 const movedFromLog = ref<null | {movedFromId:string;}[]>(null);
-let scrollEl: null | HTMLElement = null;
 
 watch(moderationNote, async () => {
 	await misskeyApi('admin/update-user-note', { userId: props.user.id, text: moderationNote.value });
@@ -314,19 +313,15 @@ async function fetchMovedFromLog() {
 }
 
 function parallaxLoop() {
-	requestNextParallaxFrame();
-	parallax();
-}
-
-function requestNextParallaxFrame() {
 	parallaxAnimationId.value = window.requestAnimationFrame(parallaxLoop);
+	parallax();
 }
 
 function parallax() {
 	const banner = bannerEl.value as any;
 	if (banner == null) return;
 
-	const top = scrollEl?.scrollTop ?? scrollY;
+	const top = getScrollPosition(rootEl.value);
 
 	if (top < 0) return;
 
@@ -335,23 +330,6 @@ function parallax() {
 	banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
 }
 
-function startParallax() {
-	(scrollEl ?? window).removeEventListener('scroll', startParallax);
-	requestNextParallaxFrame();
-}
-
-function addScrollEvent() {
-	(scrollEl ?? window).addEventListener('scroll', startParallax);
-}
-
-function cancelParallax() {
-	if (parallaxAnimationId.value) {
-		window.cancelAnimationFrame(parallaxAnimationId.value);
-		parallaxAnimationId.value = null;
-		addScrollEvent();
-	}
-}
-
 function showMemoTextarea() {
 	isEditingMemo.value = true;
 	nextTick(() => {
@@ -416,10 +394,7 @@ watch([props.user], () => {
 });
 
 onMounted(() => {
-	scrollEl = getScrollContainer(rootEl.value);
-	addScrollEvent();
-	(scrollEl ?? window).addEventListener('scrollend', cancelParallax);
-	parallax();
+	window.requestAnimationFrame(parallaxLoop);
 	narrow.value = rootEl.value!.clientWidth < 1000;
 
 	if (props.user.birthday) {
@@ -442,7 +417,11 @@ onMounted(() => {
 	});
 });
 
-onUnmounted(cancelParallax);
+onUnmounted(() => {
+	if (parallaxAnimationId.value) {
+		window.cancelAnimationFrame(parallaxAnimationId.value);
+	}
+});
 </script>
 
 <style lang="scss" scoped>