输入框阻止iPhone页面滚动

Question

我正在开发一个有很多表单的网站。我发现，当你在iPhone上滚动/滑动网站时，如果你的手指在输入字段上，页面不会滚动。要滚动，你必须将手指放在body上。

有人有什么想法是什么导致了这种奇怪的行为吗？

这只是简单的包含在form标签中的输入。

- user3122094

---

如果手指滑动的起始点在输入框上方，则基本上无法滚动网站。 - user3122094

你有没有找到这个问题的解决方案？ - Ron

我做了！这是在一个我接手的项目中。问题是前任开发人员故意实现了功能，使得无法在这些输入框上滚动... - user3122094

Answer 1

这个问题的一个解决方法可能是：

function setTextareaPointerEvents(value) {
    var nodes = document.getElementsByTagName('textarea');
    for(var i = 0; i < nodes.length; i++) {
        nodes[i].style.pointerEvents = value;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    setTextareaPointerEvents('none');
});

document.addEventListener('touchstart', function() {
    setTextareaPointerEvents('auto');
});

document.addEventListener('touchmove', function() {
    e.preventDefault();
    setTextareaPointerEvents('none');
});

document.addEventListener('touchend', function() {
    setTimeout(function() {
        setTextareaPointerEvents('none');
    }, 0);
});

这将使移动版Safari（其他浏览器目前未经测试）忽略文本区域的滚动，但允许像往常一样设置焦点等。

- Cristi Marian

---

相当不错的解决方案。谢谢！不知道有没有人能在安卓上测试过这个？ - Daniel Bonnell