Interrupt iOS scrolling using JavaScript

Question

Is there way to interrupt iOS scrolling using javascript?

Example 1: user is scrolling content by moving his finger through device screen. When some event happens user continue moving his finger without raising but there is no scrolling anymore.

Example 2: user initiated scrolling but stopped his finger without raising. Some event happens and scrollbar disappears.

Example 3: Momentum scrolling completely stops when some event happens.

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

1

The first case could probably be covered using the following piece of code from another question

<script type="text/javascript">
   function blockMove() {
      event.preventDefault() ;
}
</script>

<body ontouchmove="blockMove()">

However, it will only work on iOS 8+. As for the other two cases I'm not aware of any method to do that.

edited May 23 '17 at 12:30

Community

1
1

answered Nov 27 '14 at 20:12

Rick

3,240
2
29
53

It is not possible to interrupt scrolling in progress by event.preventDefault() – User Created Image Nov 28 '14 at 22:40

score 1 · Answer 2 · answered Feb 05 '15 at 01:26

If you're talking about interrupting the iOS inertia/momentum scrolling, then I might have something for you.

First of all, you need to add fastclick.js. The lib removes the 300ms click delay on mobile devices and enables event capturing during inertia/momentum scrolling.

After including fastclick and attaching it to the body element, my code to interrupt scrolling looks like this:

scrollElement.style.overflow = 'hidden';
setTimeout(function() {
  scrollElement.style.overflow = '';
}, 10);

The trick is to set overflow: hidden, which stops the inertia/momentum scrolling. Please see my fiddle for a full implementation of stop scrolling during inertia/momentum.

Interrupt iOS scrolling using JavaScript

2 Answers2