0

I'm making a webapp for iOS. I want it to be not-scrollable, with the exception of a textarea (that needs to be scroll-able). I've tried looking around at similar problems such as this one disable enter key on page, but NOT in textarea without luck (that example looked the most promising, but I got "can't find variable node" error in Safari).

Can anyone help me with this? Thanks

Didn't solve my problem but helpful - marked best answer

Community
  • 1
  • 1
Raekye
  • 5,081
  • 8
  • 49
  • 74

1 Answers1

1

You could see if the user is trying to scroll (usually one finger moving on the screen indicates a scroll), and using an onTouchMove event Listener, prevent default and propagation.

var element = document.getElementById("textarea");
element.addEventListener("touchmove",function(e){onTouchMove(e)},false);

function onTouchMove(e) {

    if(e.touches.length != 1) return;

    e.stopPropagation();
    e.preventDefault();

}

iDevices are kind of tricky when it comes to scrolling internal elements anyway; usually people are trying to achieve scroll effects on inner elements :)

Jeffrey Sweeney
  • 5,986
  • 5
  • 24
  • 32
  • Hmmm. Unfortunately I already set scrolling for textarea with one finger (I want it to act as if the textarea is the "background"). But I'll take a look at your code and try to see if I can implement it so it works. Thanks! Edit: Is there a way I can "override" prexisting functions (the one that blocked scrolling in the body)? Like how sub-items take priority over more general ones in CSS – Raekye Dec 12 '11 at 03:55
  • You may have figured this out already; sorry for the late response. If you're adding events with addEventListener, you can specify how events bubble with the last boolean argument. http://www.quirksmode.org/js/events_order.html – Jeffrey Sweeney Dec 12 '11 at 14:26
  • Hmm, now I'm sure this has to be something stupid, but I can't figure it out xD Here's my code (actions in the function commented out atm) function cancelEvent() { //alert(event); //event.preventDefault(); //event.preventPropagation(); } document.getElementById('display').addEventListener('touchmove', function(e){cancelEvent(e)}, false); document.getElementById('body').addEventListener('touchmove', function(e){cancelEvent(e)}, false); And when I do alert(event) it gives "object touchevent" but when I try to preventDefault() and preventPropagation it gives a "null" error. – Raekye Dec 12 '11 at 15:07
  • The cancelEvent function doesn't have an argument. Also, is there an element with the id of "body", or are you trying to get the body element? – Jeffrey Sweeney Dec 12 '11 at 15:22
  • Yep haha silly me. So I've been playing around with propagation without much luck. The idea (that I had anyway) was that I would preventPropagation and use bubbling ('false' parameter) so that the scroll would be used normally for the textbox, but not sent to the body tag. However, that's not working for me. Sorry for the trouble, kinda being spoon fed haha, but how could I use preventPropagation to hide scrolling from the body? – Raekye Dec 12 '11 at 23:33
  • Here is my code `function cancelEvent(event) { event.preventPropagation(); } function cancelEventT(event) { event.preventDefault(); } document.getElementById('display').addEventListener('ontouchmove', function(e){cancelEvent(e)}, false); document.getElementById('body').addEventListener('ontouchmove', function(e){cancelEventT(e)}, false);` – Raekye Dec 12 '11 at 23:33
  • Alright now an even stupider thing. Here is my code document.getElementById('display').addEventListener('touchmove', alert('hi'), false); document.getElementById('body').addEventListener('touchmove', alert('bye'), false); And I only get 2 alerts, both right on load. I've also tried changing 'touchmove' to 'ontouchmove' . No luck. What's going on? – Raekye Dec 12 '11 at 23:55
  • If you want to allow scrolling for the textarea, just don't add the cancelEvent callback. Because the textarea is inside the body, the event will hit the body tag, and then the body tag will prevent default scrolling. In your last comment (and this baffled me for awhile too), you're calling the alert functions. If you wrap them in a function(){} block, they should execute ontouchmove. – Jeffrey Sweeney Dec 13 '11 at 00:23
  • After searching around it seems like it's just a bug; if I only have a "cancelEvent()" on the body tag, it does stop scrolling in divs too. The last thing I can think of that I haven't tried is using capturing mode and stopPropagation(), although from my understanding stopPropagation() is only for bubbling. – Raekye Dec 13 '11 at 00:58