Prevent mobile safari from scrolling page when textarea focused

Question

As the title suggests, I need a workaround to prevent mobile safari from scrolling the document when a textarea is focused. The default behavior is to scroll the page so the textarea's top is aligned with the top of the window. I just want my page to stay put. Is this possible?

Take a look [at this](http://stackoverflow.com/questions/6437911/disable-scroll-on-a-uiwebview-allowed) — tipycalFlow, Mar 04 '12 at 05:30

score 6 · Answer 1 · answered Mar 05 '12 at 09:02

6

Try this:

<script type="text/javascript">
   function blockMove() {
      event.preventDefault() ;
}
</script>

and

<input name="textbox" type="text" value="" onkeyup="blockMove;"/>

Maybe you need a timer to allow the browser to scroll the textarea to top before blocking the movement.

answered Mar 05 '12 at 09:02

PeakJi

1,547
14
23

This would be a valid solution. Although some more thought into how you would need to implement it would be required. On a focus event etc maybe? – Sphvn Mar 08 '12 at 05:26

score 6 · Accepted Answer · answered Mar 08 '12 at 08:22

try with this

// javascript.js
var locked_scroll = false;
var last_pos = 0;

document.getElementById('my-text').addEventListener('focus', function(event){
    console.log('set locked');
    locked_scroll = true;
    last_pos = document.getElementById('wrapper').scrollTop
});

document.getElementById('my-text').addEventListener('blur', function(event){
    console.log('set unlocked');
    locked_scroll = false;
});

document.getElementById('wrapper').addEventListener("scroll", function(event){

    if(locked_scroll) {
        event.target.scrollTop = last_pos;
    }

}, true);

the event scroll only works when the element have a fixed height and the overflow property set to auto or scroll

#wrapper {
    height: 300px;
    overflow: auto;    
}

check the example: http://jsfiddle.net/4YkNj/

Prevent mobile safari from scrolling page when textarea focused

2 Answers2