Automatic scroll to element with class

I have a div containing a chapter-list next to a video player. The current playing chapter has the class “.current” added.

<div class="hp_chapter--list">
    <ul class="hp_chapters">
        <li class=""><div><a class="hp_chapter" href="#" data-chapter="0">00:00</a></li>
        <li class=""><div><a class="hp_chapter" href="#" data-chapter="1">00:02</a></li>
        <li class=""><div><a class="hp_chapter" href="#" data-chapter="2">00:03</a></li>
        <li class=""><div><a class="hp_chapter" href="#" data-chapter="3">00:04</a></li>
        <li class=""><div><a class="hp_chapter" href="#" data-chapter="4">00:05</a></li>
        <li class="current"><div><a class="hp_chapter" href="#" data-chapter="5">00:07</a></li>
    </ul>
</div>

There are long videos with a lot of chapters and I have a max height on the “.hp_chapter–list” with an overflow-y: auto. My question is, how can I make the div auto-scrolling so that the current list item is always visible?