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

Question

如标题所示，我需要一种解决方法来防止移动版 Safari 在文本区域获得焦点时滚动文档。默认行为是滚动页面，使文本区域的顶部与窗口的顶部对齐。我只希望我的页面保持不变。这可能吗？

Answer 1

试试这个

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

事件滚动仅在元素具有固定高度且 overflow 属性设置为auto 或 scroll 时起作用

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

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