优化返回顶部图标
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
|
||||
}
|
||||
|
||||
// 获取容器的滚动位置
|
||||
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 } => {
|
||||
if (container === window) {
|
||||
@ -125,12 +113,6 @@ const scrollToTop = () => {
|
||||
? registeredContainers.value
|
||||
: findScrollContainers()
|
||||
|
||||
console.log('滚动容器前状态:', containers.map(c => ({
|
||||
container: c === window ? 'window' : (c as Element).className || (c as Element).tagName,
|
||||
scrollTop: getScrollTop(c)
|
||||
})))
|
||||
|
||||
// 滚动所有容器到顶部
|
||||
containers.forEach(container => {
|
||||
if (container === window) {
|
||||
window.scrollTo({
|
||||
@ -145,13 +127,10 @@ const scrollToTop = () => {
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
console.log('执行了滚动操作')
|
||||
}
|
||||
|
||||
// 处理滚动事件
|
||||
const handleScroll = () => {
|
||||
// 使用已注册的容器,如果没有则重新查找
|
||||
const containers = registeredContainers.value.length > 0
|
||||
? registeredContainers.value
|
||||
: findScrollContainers()
|
||||
@ -187,24 +166,6 @@ const handleScroll = () => {
|
||||
|
||||
// 根据最大滚动值判断是否显示按钮
|
||||
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(() => {
|
||||
@ -268,14 +229,8 @@ onUnmounted(() => {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress-ring-bg {
|
||||
transition: stroke 0.3s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.progress-ring-progress {
|
||||
transition: stroke-dashoffset 0.1s linear;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user