Control Scrollbars

I have a WordPress site, with Learndash built in, to sell courses.

A lesson looks like the following: https://www.screencast.com/t/9ywLOA3clm

On the right side is a scroll bar, and it’s organized in code like this, so it will just work in the browser, and not get activate on the mobile phone.

Inside a given lesson (which is like a post), I set the “Extra class name” to in_scroll_class so it has access to this code:

@media only screen and (min-width: 768px) {
.wpb_text_column.wpb_content_element.in_scroll_class
{ height: 320px; overflow: auto; } }

Here is the solution I am looking for.

In the screenshot above, you will see that the lesson is called “Love Is Happening Now. Repeat.”

On the right I want the scroll bar to always scroll so that the lesson is in view (preferably in the middle, but it might be imperfect, and that is okay).

The scroll bar always scrolls to the top, so the user can scroll down and will see the lesson in bold type, but it would be much more intuitive if the correct lesson was always visible.

When a page refreshes, I have viewed the html and I know that it would have the text “Love Is Happening Now. Repeat.” – so it could be looked for specifically.

Then the scroll bar would be scroll so that text is in view.

I am open to a plugin being easier to work with than this scenario, and I am open to a different way of doing this.

However the widget on the right is built in to Learndash, and I don’t want to reinvent that.

I would appreciate any response to point me in the right direction, and/or sample code that has accomplished this, maybe on a site.

I have given my website, but not credentials to go see the problem. If somebody wants that, please respond.

Can anybody help ?

The page I need help with: [log in to see the link]