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?
2 Answers
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/
Comments
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.
1 Comment
Sphvn
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?