fix(frontend): 모바일 환경에서 스크롤 시 헤더 위에 요소가 존재할 경우 헤더 디자인에 문제가 발생함

kokonect-link · Dec 7, 2023 · 94efa98 · 94efa98
1 parent e014047
commit 94efa98
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
@@ -61,6 +61,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 - Fix: 열람 주의로 설정된 노트의 리액션이 '더 보기'를 눌러야 표시됨
 - Fix: 채널 이름이 긴 경우 게시 양식 표시가 깨지는 문제 (misskey-dev/misskey#12524)
 - Fix: 알림의 '받은 멘션' 및 '다이렉트 노트' 탭에서 '알림에서 답글이 달린 노트의 상위 노트 표시하기' 옵션이 적용되지 않음
+- Fix: 모바일 환경에서 스크롤 시 헤더 위에 요소가 존재할 경우 헤더 디자인에 문제가 발생함
 
 ### Server
 - Enhance: (dev) 개발 모드에서 locale 및 유형 정의가 자동으로 재생성됨 (misskey-dev/misskey#12481)

diff --git a/packages/frontend/src/ui/friendly.vue b/packages/frontend/src/ui/friendly.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<MkStickyContainer ref="contents" :class="$style.contents" style="container-type: inline-size;" @contextmenu.stop="onContextmenu">
 		<template #header>
-			<div>
+			<div v-if="!showEl2">
 				<XAnnouncements v-if="$i" :class="$style.announcements"/>
 				<XStatusBars :class="$style.statusbars"/>
 			</div>
@@ -159,6 +159,7 @@ const enablePostButton = [
 ];
 
 let showEl = $ref(false);
+let showEl2 = $ref(false);
 let lastScrollPosition = $ref(0);
 let queue = $ref(0);
 let longTouchNavHome = $ref(false);
@@ -259,15 +260,22 @@ function onScroll() {
 	if (currentScrollPosition < 0) {
 		return;
 	}
+
 	// Stop executing this function if the difference between
 	// current scroll position and last scroll position is less than some offset
 	if (Math.abs(currentScrollPosition - lastScrollPosition) < 60) {
 		return;
 	}
+
 	showEl = currentScrollPosition < lastScrollPosition;
 	lastScrollPosition = currentScrollPosition;
 	showEl = !showEl;
 	globalEvents.emit('showEl', showEl);
+
+	if (isMobile.value) {
+		if (showEl2 === true) showEl2 = showEl;
+		else setTimeout(() => showEl2 = showEl, 50);
+	}
 }
 
 const onContextmenu = (ev) => {

diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<MkStickyContainer ref="contents" :class="$style.contents" style="container-type: inline-size;" @contextmenu.stop="onContextmenu">
 		<template #header>
-			<div>
+			<div v-if="!showEl2">
 				<XAnnouncements v-if="$i" :class="$style.announcements"/>
 				<XStatusBars :class="$style.statusbars"/>
 			</div>
@@ -130,6 +130,7 @@ window.addEventListener('resize', () => {
 });
 
 let showEl = $ref(false);
+let showEl2 = $ref(false);
 let lastScrollPosition = $ref(0);
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
@@ -202,15 +203,22 @@ function onScroll() {
 	if (currentScrollPosition < 0) {
 		return;
 	}
+
 	// Stop executing this function if the difference between
 	// current scroll position and last scroll position is less than some offset
 	if (Math.abs(currentScrollPosition - lastScrollPosition) < 60) {
 		return;
 	}
+
 	showEl = currentScrollPosition < lastScrollPosition;
 	lastScrollPosition = currentScrollPosition;
 	showEl = !showEl;
 	globalEvents.emit('showEl', showEl);
+
+	if (isMobile.value) {
+		if (showEl2 === true) showEl2 = showEl;
+		else setTimeout(() => showEl2 = showEl, 50);
+	}
 }
 
 const onContextmenu = (ev) => {