Changing scrollTop does not continue inertia scrolling

Question

I have a div with scrollable content that at a certain scrollTop value goes back to top.

var container = document.getElementById('container');

function scroll_function() {

  var new_position_top = container.scrollTop;

  if (new_position_top > 600) {

    container.scrollTop = 0;

  }

}

container.addEventListener('scroll', scroll_function);

#container {
  width: 300px;
  height: 300px;
  overflow: auto;
  border: 1px solid black;
  -webkit-overflow-scrolling: touch;
}
span {
  width: 100%;
  height: 1200px;
  float: left;
  background: red;
  background: -webkit-linear-gradient(red, yellow);
  background: -o-linear-gradient(red, yellow);
  background: -moz-linear-gradient(red, yellow);
  background: linear-gradient(red, yellow);
}

<div id="container">
  <span></span>
</div>

JSFiddle.

Using a MacBook trackpad I am getting different behaviours: Chrome and Safari work as I would expect, continuing the inertia after going back to the top. Firefox, however, goes back to the top and stops the inertia.

Using iOS Safari a similar issue appears too, as the scrollTop position is not updated until the inertia finishes.

Is there a better way of approaching it or a way to fix desktop Firefox and iOS Safari behaviour?

Answer 1

Using a library to handle smooth scroll would help at some point.

However, the inertia that is induced by the trackpad cannot be stopped because it is not controlled by the browser.

Depending on the device type (mouse wheel, trackpad) or operating system (Windows, OSX) and browser type (Chrome, Safari, Firefox), the inertia of the scroll will be handled differently.

Unfortunately, you cannot truly control the inertia from the javascript sandbox. You may try to circumvent it or create an artificial one, but you cannot go against the user trackpad.