From d800b60d4b193e37fa4de8ed32f0104cbe10f27d Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Fri, 9 Jun 2023 20:18:30 +0900
Subject: [PATCH] =?UTF-8?q?fix(client/friendly):=20=E3=82=B9=E3=82=AF?=
 =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=AB=E8=A8=88=E7=AE=97=E6=96=B9=E5=BC=8F?=
 =?UTF-8?q?=E3=81=AE=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md               |  1 +
 packages/frontend/src/ui/friendly.vue | 21 +++++----------------
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index ead10c18da..c8415419dd 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -42,6 +42,7 @@
 - Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
 - Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제
 - Fix: (Friendly) 화면이 넓은 일부 모바일 기기에서 프로필 아이콘의 높이가 잘못 설정되는 문제
+- Fix: (Friendly) 스크롤 계산 방식 변경
 - Fix: 네트워크 트래픽이 10MB/s를 초과하면 네트워크 통계 위젯의 그래프가 잘못 출력되는 문제
 - Fix: iOS 기기에서 채팅 입력란이 채팅을 가리는 문제
 
diff --git a/packages/frontend/src/ui/friendly.vue b/packages/frontend/src/ui/friendly.vue
index e082e8c7b8..46356026b0 100644
--- a/packages/frontend/src/ui/friendly.vue
+++ b/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 {