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?

Using trackpad, in your Firefox it continues with the inertia it had when it comes to the Top (instead of just stopping as it happens to me)? — Alvaro, Oct 15 '16 at 09:04

score 2 · Answer 1 · answered Oct 17 '16 at 18:39

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.

score 1 · Answer 2 · edited May 23 '17 at 12:09

1

Well, it should be an issue with iOS. Please check these resources below for more information first.

javascript scroll event for iPhone/iPad?

http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/

My experience in the past is to use a library named iScroll and then you can apply its function scrollTo

edited May 23 '17 at 12:09

Community

1
1

answered Oct 11 '16 at 08:56

trungk18

19,744
8
48
83

score 1 · Answer 3 · answered Oct 11 '16 at 09:23

1

What I would suggest you is to use external JS library like iScroll to deal with scroll event on iOS

answered Oct 11 '16 at 09:23

Sasuke91

94
8

Changing scrollTop does not continue inertia scrolling

3 Answers3