Scrollable bar for scrollable items

Question

Is there a way to scroll the div to snap to elements while scrolling the user.

For example, if we have CSS, for example

.container { height: 300px; width: 200px; overflow: auto } li { height: 40px; width: 100 % ; } 

and HTML like

 <div class="container"> <li> test </li> <li> test </li> <li> test </li> <li> test </li> <li> test </li> <li> test </li> <li> test </li> <li> test </li> <li> test </li> <li> test </li> <li> test </li> <li> test </li> <li> test </li> </div> 

Thus, the container should have a vertical scroll bar. When the user scrolls, I would like the scroll position to snap to the container’s scroll position to the nearest div in the shown one when the scroll stops. This can be tricky because browsers such as safaris offer momentum, so this should be an event at the end of the scroll.

Any ideas, if possible, and how.

Wonderful

Answer 1

You can use setTimeout. This should work

 var snap_timer; var scroll_from_mouse = true; function snapList(){ var snapped = false; var i = 0; while(!snapped && i < $('.container li').size()){ var itop = $('.container li').eq(i).position().top; var iheight = $('.container li').eq(i).outerHeight(); if(itop < iheight && itop > 0){ scroll_from_mouse = false; snapped = true; var new_scroll_top = 0; if(iheight - itop > iheight / 2) new_scroll_top = $('.container').scrollTop() + itop; else if(i > 1) new_scroll_top = $('.container').scrollTop() - ($('.container li').eq(i-1).outerHeight() - itop); else new_scroll_top = 0; $('.container').scrollTop(new_scroll_top); } i++; } }; $(function(){ $('.container').scroll(function(){ clearTimeout(snap_timer); if(scroll_from_mouse) snap_timer = setTimeout(snapList, 200); scroll_from_mouse = true; }); }); 

Answer 2

You can use CSS Scroll Snap .

However, this feature is now deprecated, so if you want to consider a cross-browser javascript with a cross-browser using the built-in CSS Scroll Snap specification, as already answered here: How to emulate CSS scrollbar anchors in Chrome? , you can use this library . I wrote.

The main reason for using this instead of your own css solution is that it works in all modern browsers and has a configurable configuration that allows you to configure synchronization when navigating and scrolling.

The library reimplementes the css binding function using javascript easing functions in vanilla and works using the property values ​​of the scrollTop / scrollLeft container element and the scroll of the Event Listener

Here is an example that shows how to use it:

 import ScrollSnap from 'scroll-snap' const snapConfig = { scrollSnapDestination: '90% 0%', // scroll-snap-destination css property, as defined here: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-destination scrollTimeout: 100, // time in ms after which scrolling is considered finished scrollTime: 300 // time in ms for the smooth snap } function callback () { console.log('called when snap animation ends') } const element = document.getElementById('container') const snapObject = new ScrollSnap(element, snapConfig) snapObject.bind(callback) // unbind the element // snapObject.unbind(); 

You can see a working demo here.