mirror of
https://gh.catmak.name/https://github.com/mihomo-party-org/mihomo-party
synced 2025-12-27 05:00:30 +08:00
opt: auto-scroll behavior to reactivate only on user scroll
This commit is contained in:
parent
bd49f1884a
commit
848f6277cb
@ -44,6 +44,7 @@ const Logs: React.FC = () => {
|
|||||||
return localStorage.getItem(LOGS_FILTER_KEY) || ''
|
return localStorage.getItem(LOGS_FILTER_KEY) || ''
|
||||||
})
|
})
|
||||||
const [trace, setTrace] = useState(true)
|
const [trace, setTrace] = useState(true)
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
const virtuosoRef = useRef<VirtuosoHandle>(null)
|
const virtuosoRef = useRef<VirtuosoHandle>(null)
|
||||||
const filteredLogs = useMemo(() => {
|
const filteredLogs = useMemo(() => {
|
||||||
@ -57,6 +58,22 @@ const Logs: React.FC = () => {
|
|||||||
localStorage.setItem(LOGS_FILTER_KEY, filter)
|
localStorage.setItem(LOGS_FILTER_KEY, filter)
|
||||||
}, [filter])
|
}, [filter])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!trace) {
|
||||||
|
const container = containerRef.current
|
||||||
|
if (container) {
|
||||||
|
const handleScroll = () => {
|
||||||
|
setTrace(true)
|
||||||
|
container.removeEventListener('wheel', handleScroll)
|
||||||
|
}
|
||||||
|
container.addEventListener('wheel', handleScroll)
|
||||||
|
return () => {
|
||||||
|
container.removeEventListener('wheel', handleScroll)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [trace])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!trace) return
|
if (!trace) return
|
||||||
virtuosoRef.current?.scrollToIndex({
|
virtuosoRef.current?.scrollToIndex({
|
||||||
@ -96,7 +113,9 @@ const Logs: React.FC = () => {
|
|||||||
variant={trace ? 'solid' : 'bordered'}
|
variant={trace ? 'solid' : 'bordered'}
|
||||||
title={t('logs.autoScroll')}
|
title={t('logs.autoScroll')}
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
setTrace((prev) => !prev)
|
if (trace) {
|
||||||
|
setTrace(false)
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<IoLocationSharp className="text-lg" />
|
<IoLocationSharp className="text-lg" />
|
||||||
@ -117,7 +136,7 @@ const Logs: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
<Divider />
|
<Divider />
|
||||||
</div>
|
</div>
|
||||||
<div className="h-[calc(100vh-100px)] mt-px">
|
<div className="h-[calc(100vh-100px)] mt-px" ref={containerRef}>
|
||||||
<Virtuoso
|
<Virtuoso
|
||||||
ref={virtuosoRef}
|
ref={virtuosoRef}
|
||||||
data={filteredLogs}
|
data={filteredLogs}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user