feat(player): 新增长页面一键回到顶部按钮
- 在 MainLayout 主滚动区挂载浮动回顶按钮,投注列表与赛事详情等长页通用 - 滚动超过阈值后显示,支持平滑回顶与底部导航避让 - 补充中/英/马来语文案 common.back_to_top Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
38
apps/player/src/composables/useBackToTop.ts
Normal file
38
apps/player/src/composables/useBackToTop.ts
Normal 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 };
|
||||
}
|
||||
Reference in New Issue
Block a user