fix(client/friendly): スクロール計算方式の変更

CHANGELOG_CHERRYPICK.md

@@ -42,6 +42,7 @@
 - Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
 - Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제
 - Fix: (Friendly) 화면이 넓은 일부 모바일 기기에서 프로필 아이콘의 높이가 잘못 설정되는 문제
+- Fix: (Friendly) 스크롤 계산 방식 변경
 - Fix: 네트워크 트래픽이 10MB/s를 초과하면 네트워크 통계 위젯의 그래프가 잘못 출력되는 문제
 - Fix: iOS 기기에서 채팅 입력란이 채팅을 가리는 문제
 

packages/frontend/src/ui/friendly.vue

@@ -1,8 +1,8 @@
 <template>
-<div :class="[$style.root, { [$style.narrow]: isMobile }]">
+<div :class="$style.root">
 	<XSidebar v-if="!isMobile" :class="$style.sidebar"/>
 
-	<MkStickyContainer ref="contents" :class="[$style.contents, { [$style.narrow]: isMobile }]" style="container-type: inline-size;" @contextmenu.stop="onContextmenu">
+	<MkStickyContainer ref="contents" :class="$style.contents" style="container-type: inline-size;" @contextmenu.stop="onContextmenu">
 		<template #header><XStatusBars :class="$style.statusbars"/></template>
 		<RouterView/>
 		<div v-if="!(mainRouter.currentRoute.value.name === 'messaging-room' || mainRouter.currentRoute.value.name === 'messaging-room-group')" :class="$style.spacer"></div>
@@ -190,17 +190,17 @@ onMounted(() => {
 		}, { passive: true });
 	}
 
-	window.addEventListener('scroll', onScroll);
+	contents.value.rootEl.addEventListener('scroll', onScroll);
 
 	eventBus.on('queueUpdated', (q) => queueUpdated(q));
 });
 
 onBeforeUnmount(() => {
-	window.removeEventListener('scroll', onScroll);
+	contents.value.rootEl.removeEventListener('scroll', onScroll);
 });
 
 function onScroll() {
-	const currentScrollPosition = window.scrollY || document.documentElement.scrollTop;
+	const currentScrollPosition = contents.value.rootEl.scrollTop;
 	if (currentScrollPosition < 0) {
 		return;
 	}
@@ -361,13 +361,6 @@ $float-button-size: 65px;
 	contain: strict;
 	box-sizing: border-box;
 	display: flex;
-
-	&.narrow {
-		min-height: 100dvh;
-		height: auto;
-		overflow: initial;
-		contain: none;
-	}
 }
 
 .sidebar {
@@ -382,10 +375,6 @@ $float-button-size: 65px;
 	overflow-y: scroll;
 	overscroll-behavior: contain;
 	background: var(--bg);
-
-	&.narrow {
-		overflow: initial;
-	}
 }
 
 .widgets {