在 ios 设备手指输入标签上滚动

Question

我在一个带有一些输入字段的网站上有一个基本表单。 如果用户试图滚动页面，并通过将手指放在输入框内开始滚动，它不会让页面滚动。 如果他们用手指在正文的某处开始滚动，页面滚动得很好。

这家伙似乎遇到了同样的问题，但他说以前的开发人员有目的地实现了这个，我绝对没有这个问题。 Input field prevents page from scrolling on iphone

有什么想法吗？

Answer 1

html { 
  overflow: scroll; 
  -webkit-overflow-scrolling: touch;
}

适用于 input 元素和 iframe 元素。 触摸事件解决方案解决了滚动问题，但禁用了这些元素上的焦点事件。

Answer 2

我的代码，简化后是这样的：

html:

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, target-densitydpi=medium-dpi" />
        <title>Broken Input Scrolling</title>
        <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
        <script src="jquery.js"></script>
        <script src="jquery.mobile-1.4.5.min.js"></script>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>

    <div data-role="page" id="outerDiv">
        <div data-role="header">
            <h1>Broken Input Scrolling</h1>
        </div>

        <div data-role="content" id="contentDiv">
            <div id="tableDiv">
                <table>
                    <tbody>
                        <tr>
                            <td name="nameTitle" id="nameTitle" class="input-row3"><span>Scenario Name</span></td>
                            <td><input type="email" name="name1" id="name1" placeholder="Scenario 1"/></td>
                            <td><input type="email" name="name2" id="name2" placeholder="Scenario 2"/></td>
                            <td><input type="email" name="name3" id="name3" placeholder="Scenario 3"/></td>
                            <td><input type="email" name="name4" id="name4" placeholder="Scenario 4"/></td>
                            <td><input type="email" name="name5" id="name5" placeholder="Scenario 5"/></td>
                            <td><input type="email" name="name6" id="name6" placeholder="Scenario 6"/></td>
                            <td><input type="email" name="name7" id="name7" placeholder="Scenario 7"/></td>
                            <td><input type="email" name="name8" id="name8" placeholder="Scenario 8"/></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript">
       app.initialize();
    </script>

    </body>
</html>

css:

table {
    width: 90em;
    table-layout:fixed;
}
td {
    height: 3em;
    width: 10em;
    border: 0.1em solid black;
}
#tableDiv {
    overflow-x: auto !important;
}
#tableDiv > * {
    -webkit-transform: translate3d(0,0,0);
}

事实证明，删除这块可以解决问题：

#tableDiv > * {
    -webkit-transform: translate3d(0,0,0);
}

这是不必要的，但在尝试改进滚动时已在实际项目（更大）中添加。

我不知道为什么这会导致 iOS 而不是 Android 出现问题。如果有人可以详细说明为什么会发生这种情况（并因此提供更好的答案），他们可以获得一些赏金。

顺便说一句...如果使用足够大的屏幕而不需要滚动，您将需要添加更多行或更宽的行。

Answer 3

解决此问题的方法可能是：

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（目前尚未测试的其他）忽略用于滚动的文本区域，但允许像往常一样设置焦点等。

Answer 4

您可以尝试下面的代码来防止 touchmove 上的输入

$(document).on('touchmove','input',function(e){
      e.preventDefault();
});