Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable scrolling when changing focus form elements ipad web app

I have a web app. I'm trying to disable/prevent the scrolling that occurs when you focus on different form inputs (i.e. the scrolling that occurs as you advance through input elements in a form).

I've already disabled scrolling with this:

 <script type="text/javascript">      $(document).ready(function() {          document.ontouchmove = function(e){               e.preventDefault();               }      });  </script> 

To add a little more info - I have a few "slides" that my page consists of. Each are 768x1024 and they are "stacked" on the page (i.e. the page is 768x3072 [1024*3=3072]) and when you click a link I'm using scrollTo jquery plugin to scroll to the next "slide" and .focus() on an input element.

Does anyone know how to do this?

like image 228
Andrew Samuelsen Avatar asked Jul 18 '11 22:07

Andrew Samuelsen


People also ask

How do I disable scrolling on my website?

To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML. CSS.

How do I stop my site from scrolling in CSS?

Disabling scroll with only CSS. There's another way to disable scrolling that is commonly used when opening modals or scrollable floating elements. And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.


2 Answers

I've found that in UIWebView, document.body is also sometimes moved. So I use:

    input.onfocus = function () {         window.scrollTo(0, 0);         document.body.scrollTop = 0;     } 
like image 139
Paul Greyson Avatar answered Sep 23 '22 12:09

Paul Greyson


Ooops, the window.scrollTo suggested is kinda lousy and make things unpredictable.

Try this better solution:

jQuery('body').bind('focusin focus', function(e){   e.preventDefault(); }) 

Or, just hook your input:

jQuery('input.your-input-class').bind('focusin focus', function(e){   e.preventDefault(); }) 

Why? Browsers may scroll the focused form element into view by default on 'focusin' event fired (Firefox has a bug, so hook on focus instead). So, just tell them don't do that explicitly.

BTW, if the focus event is triggered by element.focus() in your code, then even the upon solution would not be functional.

So, a solution to that would be replace you focus trigger to select, i.e.

element.select() 

other than element.focus()

If you don't like the element.select() approach since it will select the text inside the input element, then try to create a Range object of the input element text and collapse it if you will, sorry for no time to try that at this moment.

like image 23
Paul Lan Avatar answered Sep 24 '22 12:09

Paul Lan