feat(player): 新增长页面一键回到顶部按钮

- 在 MainLayout 主滚动区挂载浮动回顶按钮,投注列表与赛事详情等长页通用

- 滚动超过阈值后显示,支持平滑回顶与底部导航避让

- 补充中/英/马来语文案 common.back_to_top

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-06-16 10:07:09 +08:00
parent 2a8b8415e7
commit 06d85953ba
6 changed files with 123 additions and 0 deletions

View File

@@ -0,0 +1,38 @@
import { onMounted, onUnmounted, ref, watch, type Ref } from 'vue';
export function useBackToTop(
scrollEl: Ref<HTMLElement | null>,
options?: { threshold?: number },
) {
const visible = ref(false);
const threshold = options?.threshold ?? 320;
function onScroll() {
const el = scrollEl.value;
visible.value = !!el && el.scrollTop > threshold;
}
function scrollToTop() {
scrollEl.value?.scrollTo({ top: 0, behavior: 'smooth' });
}
function bind(el: HTMLElement | null) {
el?.addEventListener('scroll', onScroll, { passive: true });
onScroll();
}
function unbind(el: HTMLElement | null) {
el?.removeEventListener('scroll', onScroll);
}
onMounted(() => bind(scrollEl.value));
onUnmounted(() => unbind(scrollEl.value));
watch(scrollEl, (el, prev) => {
unbind(prev);
bind(el);
});
return { visible, scrollToTop, onScroll };
}