javascripthtmlcssscrollfrontend

scrolling snapping to next item instead of moving continuously

I have a navigation menu with overflow-y: scroll property, this navigation menu consists of multiple items.

I want to know if there is a way that each time user moves the scrollbar, it moves exactly to next item of menu.

this is my menu

enter image description here

and once the user moves the scroll bar I want the navigation menu to snap to second item like this:

enter image description here

Solution

  • Scroll-snap-type: both mandatory; Scroll-behaviour: smooth;