Как перетащить / прокрутить HTML текст на приостановленной анимации

Question

Итак, у меня есть длинный анимированный текст выделенного текста (текст медленно скользит справа налево), и у меня есть пауза при наведении и при нажатии , как показано в коде ниже, в противном случае по умолчанию он будет бесконечным. Мне интересно, возможно ли мне иметь возможность перетаскивать / прокручивать текст от начала до конца, пока анимация текста приостановлена ​​, поэтому что я вижу полный длинный текст, не дожидаясь завершения анимации. Я предполагаю, что нужно много JavaScript, но я не уверен, как этого достичь.

Реагирующий компонент:

class Example extends React.Component {
    ...
    stopAnimation(event){
        if (event.target.style.animationPlayState == ""){
            event.target.style.animationPlayState = "paused";
        } else {
            event.target.style.animationPlayState = "";
        }
    }

    render() {
       return(
           <div class='marquee'>
              <h1 onClick={this.stopAnimation}>Some long text that won't fit in the div</h1>
           </div>
       )
    }
}

CSS:

.marquee {
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.marquee h1 {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}

.marquee h1:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}