Disable IOS Safari Elastic Scrolling

Question

I am writing a web app in HTML and JavaScript for use on an iPhone. What I would like to achieve is preventing the app from elastic scrolling (scrolling past the pages extents and bouncing back). However, I need some of the longer elements of my app to be able to be scrolled (the app has a long canvas).

I have tried many answers to this found elsewhere on the internet, however, all of those solutions either used JQuery, disabled scrolling altogether, used Phonegap or just plain didn't work on IOS 7. How can I do this?

possible duplicate of [How to disable rubber band in iOS web apps?](http://stackoverflow.com/questions/10357844/how-to-disable-rubber-band-in-ios-web-apps) — mplewis, Jun 16 '14 at 02:28
The solution given on that question no longer works. You experience jittering at the upper and lower limits. — Phedg1, Jun 18 '14 at 04:18

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

22

There is a way to achieve this without jQuery:

document.body.addEventListener('touchmove', function(event) {
    event.preventDefault();
});

But this is not a proper solution. It's better to wrap your content in some div, and use css property on it:

 -webkit-overflow-scrolling: touch;

Here is the example

Edit:

This will only prevent overscroll in webview, not in app. So you need to disable this feature in app config. If you use phonegap:

<preference name="DisallowOverscroll" value="true" />

More description here

If you don't use phonegap, you can use this.

edited May 23 '17 at 12:17

Community

1
1

answered Jun 08 '14 at 21:05

Umidbek

1,504
12
26

1

This stops you scrolling at all. I want to be able to scroll, but I don't want the page to go past its extremities. – Phedg1 Jun 13 '14 at 01:49
So, allow scrolling, but not do this [link](http://cdn.ismashphone.com/wp-content/uploads/2012/08/iOSRubber.png) – Phedg1 Jun 13 '14 at 01:51
http://stackoverflow.com/questions/17550704/phonegap-ios-prevent-overscroll might be helpful – Umidbek Jun 13 '14 at 07:41
That's only for those who use PhoneGap – Phedg1 Jun 13 '14 at 07:45
1

@user2376055 If you don't use phonegap, you can use http://davidjhinson.wordpress.com/2010/11/13/stop-the-bouncy-uiwebviews/ – Umidbek Jan 07 '15 at 06:54
that last link was a real winner! – whyoz Jun 05 '15 at 19:17
this doesn't answer the question. – angry kiwi Feb 05 '17 at 14:29

score 1 · Answer 2 · answered Apr 11 '17 at 00:39

The above solution was insufficient in my case. It prohibits all scrolling. It is possible to build a solution here that prevents elastic scrolling in iOS, but that still allows scrolling on children. I this took the above solution and added a check that bubbles up the DOM to determine which scrollable element "owns" the scroll event, and if it's the root element of the page, I drop it:

function overflowIsHidden(node) {
  var style = getComputedStyle(node);
  return style.overflow === 'hidden' || style.overflowX === 'hidden' || style.overflowY === 'hidden';
}

function findNearestScrollableParent(firstNode) {
  var node = firstNode;
  var scrollable = null;
  while(!scrollable && node) {
    if (node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight) {
      if (!overflowIsHidden(node)) {
        scrollable = node;
      }
    }
    node = node.parentNode;
  }
  return scrollable;
}

document.addEventListener('DOMContentLoaded', function() {

    document.body.addEventListener('touchmove', function(event) {
      var owner = findNearestScrollableParent(event.target);
      if (!owner || owner === document.documentElement || owner === document.body) {
        event.preventDefault();
      }
    });

}, false);

At this point, the body is no longer scrollable or elastically scrollable in iOS, but children elements are. You can then add -webkit-overflow-scrolling: touch; to those children so they are elastic but the document wont be. This will actually capture all scroll events even as you scroll to the bottom of the children, so the window's scroll position wont ever change erroneously. Alternatively you may also consider:

['resize', 'orientationchange', 'scroll'].forEach(function(event) {
  window.addEventListener(event, function() {
    window.scrollTo(0, 0);
  });
});

which in addition to the first code block I shared, should really throw an axe at document scrolling in ios altogether.

score 1 · Answer 3 · answered Nov 15 '19 at 12:11

1

So when you have scroll content in body & want to disable elastic scroll use:

let scrollToTop = $(window).scrollTop();
if (scrollToTop < 0) {
   // do something here
}

Because elastic scroll will always have negative value

answered Nov 15 '19 at 12:11

shubh14896

156
1
12

Pranay Dutta · Answer 4 · 2019-08-14T06:54:59.157

0

Based on answer by @umidbek this is how it worked for me

     document.getElementById('content-sections').
         addEventListener('touchmove', function (event) {
               event.preventDefault();
               return false;
         });

edited Aug 14 '19 at 06:54

answered Aug 14 '19 at 06:42

Pranay Dutta

2,483
2
30
42

Disable IOS Safari Elastic Scrolling

4 Answers4

Linked