diff --git a/src/js/views/Modals/KioskMode.js b/src/js/views/Modals/KioskMode.js index b93150470..3cb4e168a 100755 --- a/src/js/views/Modals/KioskMode.js +++ b/src/js/views/Modals/KioskMode.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import Modal from './Modal'; import Thumbnail from '../../components/Thumbnail'; @@ -17,12 +17,24 @@ const LyricsScroller = ({ content = '', percent = 0, }) => { + const containerRef = useRef({}); + const contentRef = useRef({}); + const [autoScroll, setAutoScroll] = useState(true); + const onWheel = () => setAutoScroll(false); + + useEffect(() => { + if (autoScroll) { + const scrollable = contentRef.current?.scrollHeight - containerRef.current.clientHeight; + containerRef.current.scrollTo(0, percent * scrollable) + } + }, [percent]); + return ( -