在ios设备手指input标签上滚动
我有一个基本的forms，在一个网站上有一些input字段。 如果用户试图滚动页面，并通过将他的手指放在input框中开始滚动，则不会让页面滚动。 如果他们用手指在身体某个地方开始滚动，页面就会滚动。
这个人似乎也是同样的问题，但是他说以前的开发人员有目的地实现了这一点，我绝对没有这个问题。 input字段阻止页面在iPhone上滚动
有任何想法吗？
我的代码，简化后是这样的：
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); }
事实certificate，删除这一块解决了这个问题：
#tableDiv > * { -webkit-transform: translate3d(0,0,0); }
这是不必要的，但是在尝试改进滚动时，在实际项目（更大）中被添加了。
我不知道为什么这会导致iOS的问题，而不是Android。 如果有人能够详细说明为什么会发生这种情况（并因此提供更好的答案），他们可以得到一些赏金。
顺便说一句，你需要添加更多的行或更宽的行，如果使用足够大的屏幕，不需要滚动。
解决此问题的方法可能是：
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（其他未经testing）忽略滚动的textareas，但可以像往常一样设置焦点等。
你可以尝试下面的代码，以防止touchmoveinput
$(document).on('touchmove','input',function(e){ e.preventDefault(); });
html { overflow: scroll; -webkit-overflow-scrolling: touch; }
适用于input元素和iframe元素。 触摸事件解决scheme解决了滚动问题，但禁用了这些元素上的焦点事件。