6

Im working on a site that has a lot of forms. I have noticed that when you scroll/swipe the site on an iphone the page does not scroll if your finger is on an input field. To scroll you have to aim your finger on the body kind of.

Anyone having some ideas on what causes this strange behaviour?

Its just simple inputs wrapped in a form tag.

user3122094
  • 241
  • 1
  • 2
  • 15
  • Basically its not possible to scroll the site if the fingers swipe starting point is over an input. – user3122094 Apr 05 '14 at 16:04
  • did u ever found a solution for this? – Ron May 09 '14 at 15:52
  • I did! It was in aproject that i've had took over from another develoepr. Tha peoblem was that the former developer on purpose had implemented functionality to not be able to scroll on those inputs... – user3122094 May 14 '14 at 11:38

1 Answers1

3

A workaround for this issue might be : 

function setTextareaPointerEvents(value) {
    var nodes = document.getElementsByTagName('textarea');
    for(var i = 0; i < nodes.length; i++) {
        nodes[i].style.pointerEvents = value;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    setTextareaPointerEvents('none');
});

document.addEventListener('touchstart', function() {
    setTextareaPointerEvents('auto');
});

document.addEventListener('touchmove', function() {
    e.preventDefault();
    setTextareaPointerEvents('none');
});

document.addEventListener('touchend', function() {
    setTimeout(function() {
        setTextareaPointerEvents('none');
    }, 0);
});

This will make Mobile Safari (others not tested so far) ignore the textareas for scrolling but allows to set focus etc. as usual.

Cristi Marian
  • 443
  • 8
  • 18