I have a div with vertical scrollbar. It contains a list of 20 songs, with variable length titles. At any given moment, the div can display only 7 songs.
I am able to highlight the song being played in the div, however, it remains hidden under the div, as moving to the next song refreshes the page and the div scroll to the top.
Q. How do I scroll the div such that the current song (and preferably prev and next) always remain in the view?
Any points are greatly appreciated!
One thing that may help is to check out the scrollIntoView method. If you have a unique class (or ID) on your element, you could call something like
document.getElementById("active-song").scrollIntoView({behavior: "smooth", block: "center"})
which would locate the element with an ID of active-song, and smoothly scroll it into the center of the view (which should leave the previous and next songs visible