当textarea聚焦时,防止移动safari滚动页面

时间:2011-12-25 05:35:29

标签: javascript ios web-applications

正如标题所暗示的那样,我需要一种解决方法来阻止移动Safari在聚焦textarea时滚动文档。默认行为是滚动页面,使textarea的顶部与窗口顶部对齐。我只想让我的页面保持不变。这可能吗?

2 个答案:

答案 0 :(得分:6)

试试这个:

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

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

也许您需要一个计时器来允许浏览器在阻止移动之前将textarea滚动到顶部。

答案 1 :(得分:6)

试试这个

// 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);

事件滚动仅在元素具有固定高度且溢出属性设置为自动滚动

时才有效
#wrapper {
    height: 300px;
    overflow: auto;    
}

查看示例:http://jsfiddle.net/4YkNj/