输入字段阻止页面在 iphone 上滚动答案

【问题标题】：Input field prevents page from scrolling on iphone输入字段阻止页面在 iphone 上滚动
【发布时间】：2015-03-04 16:46:19
【问题描述】：

我在一个有很多表单的网站上工作。我注意到，当您在 iphone 上滚动/滑动网站时，如果您的手指在输入字段上，则页面不会滚动。要滚动，您必须将手指对准身体。

有人对导致这种奇怪行为的原因有一些想法吗？

它只是包装在表单标签中的简单输入。

【问题讨论】：

如果手指滑动起点在输入上方，则基本上不可能滚动网站。
你找到解决方案了吗？
我做到了！我从另一个开发者那里接手了一个项目。问题是前开发人员故意实现了无法在这些输入上滚动的功能......

标签： ios css input scroll

【解决方案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);
});

这将使 Mobile Safari（目前尚未测试的其他）忽略用于滚动的文本区域，但允许像往常一样设置焦点等。

【讨论】：

非常漂亮的解决方案。谢谢！好奇是否有人能够在 Android 上对此进行测试？