enhance(frontend): アイコンのスクロール追従を無効化してパフォーマンス向上できるように

This commit is contained in:
syuilo 2025-03-29 20:56:59 +09:00
parent 1b776a7e7e
commit d9012740a1
8 changed files with 167 additions and 118 deletions

View file

@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/>
<MkAvatar :class="[$style.avatar, prefer.s.useStickyIcons ? $style.useSticky : null]" :user="appearNote.user" :link="!mock" :preview="!mock"/>
<div :class="$style.main">
<MkNoteHeader :note="appearNote" :mini="true"/>
<MkInstanceTicker v-if="showTicker" :host="appearNote.user.host" :instance="appearNote.user.instance"/>
@ -850,9 +850,12 @@ function emitUpdReaction(emoji: string, delta: number) {
margin: 0 14px 0 0;
width: 58px;
height: 58px;
position: sticky !important;
top: calc(22px + var(--MI-stickyTop, 0px));
left: 0;
&.useSticky {
position: sticky !important;
top: calc(22px + var(--MI-stickyTop, 0px));
left: 0;
}
}
.main {
@ -1039,7 +1042,10 @@ function emitUpdReaction(emoji: string, delta: number) {
margin: 0 10px 0 0;
width: 46px;
height: 46px;
top: calc(14px + var(--MI-stickyTop, 0px));
&.useSticky {
top: calc(14px + var(--MI-stickyTop, 0px));
}
}
}