优化返回顶部图标
This commit is contained in:
parent
eed4098dff
commit
f3d7bca84c
@ -86,21 +86,9 @@ const findScrollContainers = (): (Element | Window)[] => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
console.log('找到的所有滚动容器:', containers.map(c =>
|
|
||||||
c === window ? 'window' : (c as Element).className || (c as Element).tagName
|
|
||||||
))
|
|
||||||
return containers
|
return containers
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取容器的滚动位置
|
|
||||||
const getScrollTop = (container: Element | Window): number => {
|
|
||||||
if (container === window) {
|
|
||||||
return window.pageYOffset || document.documentElement.scrollTop || 0
|
|
||||||
} else {
|
|
||||||
return (container as Element).scrollTop || 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取容器的滚动高度信息
|
// 获取容器的滚动高度信息
|
||||||
const getScrollInfo = (container: Element | Window): { scrollTop: number; scrollHeight: number; clientHeight: number } => {
|
const getScrollInfo = (container: Element | Window): { scrollTop: number; scrollHeight: number; clientHeight: number } => {
|
||||||
if (container === window) {
|
if (container === window) {
|
||||||
@ -125,12 +113,6 @@ const scrollToTop = () => {
|
|||||||
? registeredContainers.value
|
? registeredContainers.value
|
||||||
: findScrollContainers()
|
: findScrollContainers()
|
||||||
|
|
||||||
console.log('滚动容器前状态:', containers.map(c => ({
|
|
||||||
container: c === window ? 'window' : (c as Element).className || (c as Element).tagName,
|
|
||||||
scrollTop: getScrollTop(c)
|
|
||||||
})))
|
|
||||||
|
|
||||||
// 滚动所有容器到顶部
|
|
||||||
containers.forEach(container => {
|
containers.forEach(container => {
|
||||||
if (container === window) {
|
if (container === window) {
|
||||||
window.scrollTo({
|
window.scrollTo({
|
||||||
@ -145,13 +127,10 @@ const scrollToTop = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
console.log('执行了滚动操作')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理滚动事件
|
// 处理滚动事件
|
||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
// 使用已注册的容器,如果没有则重新查找
|
|
||||||
const containers = registeredContainers.value.length > 0
|
const containers = registeredContainers.value.length > 0
|
||||||
? registeredContainers.value
|
? registeredContainers.value
|
||||||
: findScrollContainers()
|
: findScrollContainers()
|
||||||
@ -187,24 +166,6 @@ const handleScroll = () => {
|
|||||||
|
|
||||||
// 根据最大滚动值判断是否显示按钮
|
// 根据最大滚动值判断是否显示按钮
|
||||||
visible.value = maxScrollTop > SCROLL_THRESHOLD
|
visible.value = maxScrollTop > SCROLL_THRESHOLD
|
||||||
|
|
||||||
// 调试日志
|
|
||||||
if (maxScrollTop > 0) {
|
|
||||||
console.log('滚动检测:', {
|
|
||||||
maxScrollTop,
|
|
||||||
scrollProgress: maxProgress,
|
|
||||||
visible: visible.value,
|
|
||||||
containers: containers.map(c => {
|
|
||||||
const info = getScrollInfo(c)
|
|
||||||
return {
|
|
||||||
container: c === window ? 'window' : (c as Element).className || (c as Element).tagName,
|
|
||||||
scrollTop: info.scrollTop,
|
|
||||||
scrollHeight: info.scrollHeight,
|
|
||||||
clientHeight: info.clientHeight
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -268,14 +229,8 @@ onUnmounted(() => {
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-ring-bg {
|
|
||||||
transition: stroke 0.3s ease;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-ring-progress {
|
.progress-ring-progress {
|
||||||
transition: stroke-dashoffset 0.1s linear;
|
transition: stroke-dashoffset 0.1s linear;
|
||||||
opacity: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow-icon {
|
.arrow-icon {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user