Fixing the momentum scrolling on iOS

When momentum scrolling is activated with -webkit-overflow-scrolling: touch; you’ll get native performance on scrolling. If you scroll to the very beginning or end you’ll get an elastic effect. But if you start scrolling down from the end or up from the beginning you’ll scroll the entire page instead of the elastic effect again.

This can be prevented by adding the code-snippet below to you’re scrolling element:

// Get the scrolling element
var scrollElement = document.getElementById('scrolling-element');

// When the user touches the element just before scrolling
scrollElement.addEventListener('touchstart', function() {
  var scrollTop = scrollElement.scrollTop,
    scrollHeight = scrollElement.scrollHeight,
    scrollBottom = scrollTop + scrollElement.offsetHeight;

  if (scrollTop === 0) {
    // If scroll position is at the beginning, scroll down 1px
    // to get elastic effect if the user scrolls up
    scrollElement.scrollTop = 1;
  } else if (scrollBottom === scrollHeight) {
    // Do the opposite if scroll position is at the end
    scrollElement.scrollTop = scrollTop - 1;
  }
});

What happens is that you scroll the element 1px from the top or bottom when you start touching the element. That way you never start scrolling from the beginning or end and you’ll get the elastic effect instead of scrolling the entire page.