How to Emulate CSS Scroll Snap Points in Chrome

How to emulate CSS Scroll Snap Points in Chrome?

Chrome 69 will contain the feature. No workaround needed.

---

Just sit and wait. Just sit and wait :-)

How can I snap scroll to the nearest predefined position?

There is a CSS spec for this, and it is well supported with native rendering and very nice touch behavior except on Chrome: http://caniuse.com/#feat=css-snappoints

For the laggard browser, there's a polypill: https://github.com/ckrack/scrollsnap-polyfill

See also How to emulate CSS Scroll Snap Points in Chrome?

Scrollable Panel snap to elements on Scroll

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;
  });
});

CSS/JavaScript - Scroll snap when user starts scrolling

The developer you were looking at is using this js script if you ant to emulate it exactly https://alvarotrigo.com/fullPage/

How long is the delay for CSS scroll snap?

CSS Scroll Snap Module Level 1:

The CSS Scroll Snap Module intentionally does not specify nor mandate any precise animations or physics used to enforce snap positions; this is left up to the user agent.

I strongly assume that most browsers that support scroll snapping (e.g. Firefox) use the same functionality that they already use for scroll-behavior: smooth;.

CSSWG - Smooth Scrolling:

The scrolling box is scrolled in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.

This means that there might be differences not only between browsers, their specific versions, but also depending on the operating system they are running on. Also note that browsers might or might not change animations based on the user settings (e.g. because of accessibility concerns).

I do not think that there is an API to get the exact delays and/or smoothing functions.

Relatively positioned elements in scrollable absolutely positioned div lag behind on scroll

In short, the ills you are suffering are common and documented. Elements with overflow:auto or overflow:scroll suffer from paint/reflow/render issues in both desktop and mobile browsers. To compound upon that there are issues in mobile browsers (webkit both on iOS and Android) with regards to not rendering relative and absolute elements if they are "off screen". This can lead to a lag when they are scrolled on screen.

There are a few "hack" shims that you can apply:

element {
    -webkit-overflow-scrolling: touch;
}

element > * {
    -webkit-transform: translateZ(0px);
}

element > * {
    -webkit-transform: translate3d(0,0,0);
}

Some reading for you:

• http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/
  http://developersday.wordpress.com/2012/08/07/scrollable-divs-rendering-issues-with-css-overflow-auto-or-scroll-iosandroid/

And a snippet I copied from somewhere into my notes and now can't find the source:

Especially on sites that rely heavily on scroll, you might discover
that your main content is relying on overflow:scroll. This is a real
challenge as this scrolling isn’t GPU accelerated in any way so the
content is repainted whenever your user scrolls. You can work around
such issues using normal page scroll (overflow:visible) and
position:fixed.

How to prevent scrollbar from repositioning web page?

overflow-y:scroll is correct, but you should use it with the html tag, not body or else you get a double scrollbar in IE 7

So the correct css would be:

html {
  overflow-y: scroll;
}

---

Related Topics