|
|
@ -55,13 +55,15 @@ export const LiveLeaderboard = ({ roomId }: Props) => {
|
|
|
|
const timerRef = useRef<Timer | null>(null)
|
|
|
|
const timerRef = useRef<Timer | null>(null)
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
const PIXELS_PER_MILLISECOND = [1, 1000 / 30] // e.g. [1, 10] means 1px every 10ms
|
|
|
|
|
|
|
|
|
|
|
|
if (autoscroll !== false) {
|
|
|
|
if (autoscroll !== false) {
|
|
|
|
timerRef.current = setInterval(() => {
|
|
|
|
timerRef.current = setInterval(() => {
|
|
|
|
console.log('scrolling')
|
|
|
|
console.log('scrolling')
|
|
|
|
|
|
|
|
|
|
|
|
window.scrollBy({
|
|
|
|
window.scrollBy({
|
|
|
|
top: autoscroll === 'down' ? 10 : -10,
|
|
|
|
top: autoscroll === 'down' ? PIXELS_PER_MILLISECOND[0] : -PIXELS_PER_MILLISECOND[0],
|
|
|
|
behavior: 'smooth',
|
|
|
|
behavior: 'instant',
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
if (window.scrollY + window.innerHeight + 1 > document.body.scrollHeight) {
|
|
|
|
if (window.scrollY + window.innerHeight + 1 > document.body.scrollHeight) {
|
|
|
@ -71,7 +73,7 @@ export const LiveLeaderboard = ({ roomId }: Props) => {
|
|
|
|
if (window.scrollY === 0) {
|
|
|
|
if (window.scrollY === 0) {
|
|
|
|
setAutoscroll('down')
|
|
|
|
setAutoscroll('down')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, 100)
|
|
|
|
}, PIXELS_PER_MILLISECOND[1])
|
|
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
return () => {
|
|
|
|
if (timerRef.current) {
|
|
|
|
if (timerRef.current) {
|
|
|
|