Can't disable scrolling when dragging on textarea or text field

[Andi]

Hi!

I want to create a web application where no scrolling is possible. I
do this with the following code:

document.addEventListener("touchmove", function(e){e.preventDefault
();}, false);

This should prevent user scrolling, but it fails, when the user
"touchmoves" over a textarea or text input field. I tried to add the
event listener to the textarea, but this had no effect.

Is there a way to effectively disable any scrolling?

Thank you in advance,
Andi

[Chrilith]

Put you content in a <div> with "overflow:hidden", set the height of
the div and you will have no scroll.

[Roger]

As mentioned in another thread, this is a poor design choice. You
must endeavor to constrain your content to the viewport. Arbitrary
cropping is a an ill-advised end-around.

[Andi]

Hi!

Im an using this meta-tag:

meta name="viewport" content="minimum-scale=1.0, width=device-width,
height=460, maximum-scale=1.0, user-scalable=no"

and and the body tag has the following style:

width: 320px;
height: 460px;
overflow: hidden;

The javascript

document.addEventListener("touchmove", function(e){e.preventDefault
();}, false);

should prevent the rubber-band scrolling behavior of Mobile Safari.
And it works, except for the following situation:

You have a textarea and the user touches the textarea, holds and drags
up or down. In this situation the rubber-band scrolling is active,
despite the js.

So, the problem is not about, that there would be anything to scroll,
but about the rubber-band effect.

[Matteo]

Adding the e.preventDefault(); to ontouchmove of the textarea should
work.

[Roger]

On Jan 7, 4:05 am, Andi <AndiSka...@gmail.com> wrote:
> Hi!
>
> Im an using this meta-tag:
>
> meta name="viewport" content="minimum-scale=1.0, width=device-width,
> height=460, maximum-scale=1.0, user-scalable=no"
>
> and and the body tag has the following style:
>
> width: 320px;
> height: 460px;
> overflow: hidden;

That is a completely ridiculous style. Do *not* set overflow:hidden
on the body.

>
> The javascript
>
> document.addEventListener("touchmove", function(e){e.preventDefault
> ();}, false);

Also ridiculous. Your design is botched from the start if you need to
stoop to these sorts of things?

>
> should prevent the rubber-band scrolling behavior of Mobile Safari.

Maybe the user doesn't want it to!

> And it works, except for the following situation:

That must be an alternate definition of "works."

>
> You have a textarea and the user touches the textarea, holds and drags
> up or down. In this situation the rubber-band scrolling is active,
> despite the js.

So what?

>
> So, the problem is not about, that there would be anything to scroll,
> but about the rubber-band effect.

The problem is that you don't understand how the Web works.

[Roger]

On Jan 7, 11:56 am, Matteo <mat...@gmail.com> wrote:
> Adding the e.preventDefault(); to ontouchmove of the textarea should
> work.

But would be a really bad idea. Stop fighting the browser.

[snip]

[Andi]

First of all:

I am developing a web technology based iPhone application. So, this
application should behave like a native iPhone app and not like an
ordinary web site.

> That is a completely ridiculous style. Do *not* set overflow:hidden on the body.

Why not? There is no need to scroll and there never should or will be.

>> document.addEventListener("touchmove", function(e){e.preventDefault
>> ();}, false);

> Also ridiculous. Your design is botched from the start if you need to
> stoop to these sorts of things?

I don't need and I don't want rubber-band scrolling. This is a dialog
in an Application, and it never needs any scrolling and so it won't
ever need the rubber-band scrolling effect. I can't image any user who
would need or want a rubber-band scrolling effect in this case. As
this will become a phonegap-based application there is no location bar
or button bar.

> So what?

The textarea makes it possible to trigger rubber-band scrolling
unintentionally and for no good reason, so I don't want it to do that.
This was the reason for my post: Maybe someone has figured out how to
prevent this behavior.

> The problem is that you don't understand how the Web works.

I know how the web works and I would choose a different path, if i
wanted to create an iPhone optimized web site, but right now I want to
build an web technology based iPhone application, which is
indistinguishable from a native app. This may sound ridiculous to you
and maybe others, but I like to push the limits. The outcome of this
experiment may yield some interesting code snippets, e.g. I have
created a reusable slider control, which looks and behaves just like a
native slider control (which is not available in Mobile Safari). This
component may be useful for other projects, maybe even for some of
yours.

Just some thoughts
There are some reasons for developing an app with web technology:

- Not everyone knows Cocoa or wants to program in Objective C
- Using web technology makes great parts of your application are
highly portable (Mac OS X, Windows, Linux, Android, Symbian,
Blackberry)
- Maybe you already have a web based app and want to port it to the
iPhone

[Andi]

> Adding the e.preventDefault(); to ontouchmove of the textarea should
work.

Sadly, it does not. I already tried this.

[Matteo]

If that doesn't work a solution could be to put an invisible div
exactly over the textarea (use absolute position and z-index). You can
then add a click event to the covering div that gives the focus back
to the textarea.

<div id="container">
<div id="cover" onmouseup="document.getElementById('text').focus();"
style="background:transparent"></div>
<textarea id="text"></textarea>
</div>

You will also need to check if the user moved her finger outside of
the #cover before giving the focus to the textarea.

Another solution could be not to show the textarea at all, and make it
appear only when a button/image/element is pressed. When the user
finished typing, you set a label with the textarea value and hide the
textarea element again. It's sure a lot of work for a simple task...
but if need to completely prevent scrolling...

[Andi]

I will try the invisible div approach, but it will neither be perfect
or elegant.
It seems the ability to scroll the page, when dragging over a textarea
or text input is hard coded in Mobile Safari. I tried to add an
preventDefault() to almost every possible event on the textarea, but
nothing changed, except that the textarea wasn't usable anymore. I
even tried to add preventDefault() to every common event on every
element on the page (*) to see if another element is responsible for
the scrolling, but this didn't help either.
It's probably time to file a bug at Apple...

[Anthony]

We are looking for iphone developers in the following categories.

Games
Productivity
News
Lifestyle
Healthcare and Fitness
Business
Finance

We have several ideas we are currently working on with developers. We
would also like to connect with additional developers on creating
applications that would have mass appeal. We want to partner with
freelance developers by providing initial funding for the project.

As there are over 15,000 applications on the Iphone app store, we
realize that this is a hit or miss with success as many applications
may not find an audience. There is a tremendous amount of risk on the
software developers part to spend their scarce time on multiple
applications without the guarantee of nominal payment. We are
eliminating that risk for you.

We are willing to offer the following :

A guarantee per application fee/payment to the developer
Profit sharing on the application
An Apple Approved firm
Marketing of your application

Please submit the following :

A brief summary of the application(s) you would like to develop
Timeframe for completion of the application.
Explanation of why this application would appeal to a mass audience ?

We look forward to a future partnership.

--
Anthony Dadlani
A Plus, LLC
1120 Ave of the Americas
4th FL
New York, NY 10036
212-626-6686

On Jan 6, 4:46 am, Chrilith <chril...@gmail.com> wrote: