47

iOS 5 has brought a number of nice things to JavaScript/Web Apps. One of them is improved scrolling. If you add

-webkit-overflow-scroll:touch;

to the style of a textarea element, scrolling will work nicely with one finger.

But there's a problem. To prevent the entire screen from scrolling, it is recommended that web apps add this line of code:

document.ontouchmove = function(e) {e.preventDefault()};

This, however, disables the new scrolling.

Does anyone have a nice way to allow the new scrolling within a textarea, but not allow the whole form to scroll?

ghenne
  • 1,903
  • 2
  • 19
  • 29

5 Answers5

56

Update Per Alvaro's comment, this solution may no longer work as of iOS 11.3.

You should be able to allow scrolling by selecting whether or not preventDefault is called. E.g.,

document.ontouchmove = function(e) {
    var target = e.currentTarget;
    while(target) {
        if(checkIfElementShouldScroll(target))
            return;
        target = target.parentNode;
    }

    e.preventDefault();
};

Alternatively, this may work by preventing the event from reaching the document level.

elementYouWantToScroll.ontouchmove = function(e) {
    e.stopPropagation();
};

Edit For anyone reading later, the alternate answer does work and is way easier.

Brian Nickel
  • 26,890
  • 5
  • 80
  • 110
  • Great an simple solution. Alternative jquery plugin solution http://www.hakoniemi.net/labs/nonbounce/ – falko Sep 11 '13 at 08:29
  • I believe you should be using `e.target`, not `e.currentTarget`, as `e.currentTarget` will always refer to the element the listener is attached to, in this case `document`. – Derek Henderson Jun 13 '14 at 14:32
  • @Alvaro have you found a solution? – Kellen Jun 06 '19 at 16:04
  • 2
    @Kellen yes, use touchstart instead, see my question here: https://stackoverflow.com/questions/49926360/prevent-ios-11-3-overflow-bouncing – Alvaro Jun 07 '19 at 17:01
23

The only issue with Brian Nickel's answer is that (as user1012566 mentioned) stopPropagation doesn't prevent bubbling when you hit your scrollable's boundaries. You can prevent this with the following:

elem.addEventListener('touchstart', function(event){
    this.allowUp = (this.scrollTop > 0);
    this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
    this.prevTop = null; 
    this.prevBot = null;
    this.lastY = event.pageY;
});

elem.addEventListener('touchmove', function(event){
    var up = (event.pageY > this.lastY), 
        down = !up;

    this.lastY = event.pageY;

    if ((up && this.allowUp) || (down && this.allowDown)) 
        event.stopPropagation();
    else 
        event.preventDefault();
});
1nfiniti
  • 2,032
  • 14
  • 19
  • I could not get this to work on IOS6 and it actually prevented scrolling on pc browsers. On IOS it would only prevent elastic scrolling if you had already scrolled past the boundaries once. – Phedg1 Jun 13 '14 at 08:31
  • 3
    This solution doesn't quite seem to work. When the scroll reaches its top or bottom limit, the element simply freezes at its current position so that I cannot scroll in either direction. I am using iOS 7.1. – Derek Henderson Jun 13 '14 at 14:12
  • Yes, exactly what he said ^ – Phedg1 Jun 13 '14 at 21:42
  • 1
    To fix, replace all occurrences of `event.pageY` with `event.targetTouches[0].pageY`. – ehynds Sep 17 '14 at 21:04
16

For anyone trying to acheive this with PhoneGap, you can disable the elastic scrolling in the cordova.plist, set the value for UIWebViewBounce to NO. I hope that helps anyone spending ages on this (like i was).

T J
  • 42,762
  • 13
  • 83
  • 138
Andrew Plummer
  • 1,150
  • 1
  • 12
  • 21
7

ScrollFix seems to be perfect solution. I tested it and it works like a charm!

https://github.com/joelambert/ScrollFix

/**
 * ScrollFix v0.1
 * http://www.joelambert.co.uk
 *
 * Copyright 2011, Joe Lambert.
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

var ScrollFix = function(elem) {
    // Variables to track inputs
    var startY, startTopScroll;

    elem = elem || document.querySelector(elem);

    // If there is no element, then do nothing  
    if(!elem)
        return;

    // Handle the start of interactions
    elem.addEventListener('touchstart', function(event){
        startY = event.touches[0].pageY;
        startTopScroll = elem.scrollTop;

        if(startTopScroll <= 0)
            elem.scrollTop = 1;

        if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)
            elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
    }, false);
};
vladaman
  • 3,741
  • 2
  • 29
  • 26
2

It was frustrating to discover a known problem with stopPropagation and native div scrolling. It does not seem to prevent the onTouchMove from bubbling up, so that when scrolling beyond the bounds of the div (upwards at the top or downwards at the bottom), the entire page will bounce.

More discussion here and here.

user1012566
  • 226
  • 1
  • 3