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?
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.
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.