0

I have the vertical navigation with the overflow: scroll, so on mobile, the menu items get hidden except for the ones that you scroll to.

On page refresh or if I select a different page the scroll starts in the beginning again.

What I want is the corresponding item to always be in the view if it matches the page.

Is there a way to center the selected item by using CSS? Like can I force the scroll to be at the point where the selected menu was located?

Rarblack
  • 4,559
  • 4
  • 22
  • 33
Max T
  • 1,365
  • 4
  • 23
  • 38

1 Answers1

0

AFAIK, CSS alone will not do this. You need to use javascript to set the scroll position. I think you can get the scroll position of the element you want centered and then use that to scroll into the correct position.

Check out:

window.scroll() - https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

and

.scrollTo() - https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

Jesse Weigel
  • 61
  • 1
  • 4