聚焦input时iOS上的触摸滚动问题
我在iOS上有一个滚动div的问题。 当试图通过触摸外部input滚动，它滚动没有任何问题，但是当我尝试滚动，我触摸input开始滚动（有很多的机会，因为它是一个div有很多input）它滚动整个窗口，而不是滚动div。 我在桌面或Android上都没有这个问题。 我发现了一个类似的问题（ iOS的HTMLinput标签停止滚动可滚动元素 ），但它也没有任何答案。 虽然我没有find任何好的解决scheme，但我决定在用户触摸input时防止触摸事件发生，但这并不是我想要的。
也许有人已经面临这个问题，可以帮助。 我真的很感激，在此先感谢。
要在iOS 5+上获得原生dynamic滚动效果，您需要：
div { overflow: scroll; -webkit-overflow-scrolling: touch; }
来源： 溢出
也许你还需要：
div > * { -webkit-transform: translateZ(0px); }
来源： 在堆栈溢出类似的问题
来源2： 另一个类似的问题
这个东西让我发疯了，经过testing的一切，我发现以下答案从托马斯·巴赫姆在这里工作，并在jQuery更简单。
只需添加一个类scrollFix到input，你就可以走了。 （或使用$('input, textarea')直接将js应用于任何input/ textarea
现在，当你触摸并滚动iOS 8+上的input时，input将禁用所有“指针事件”（包括有问题的行为）。 当我们检测到一个简单的触摸时，这些“指针事件”被启用。
$('.scrollFix').css("pointer-events","none"); $('body').on('touchstart', function(e) { $('.scrollFix').css("pointer-events","auto"); }); $('body').on('touchmove', function(e) { $('.scrollFix').css("pointer-events","none"); }); $('body').on('touchend', function(e) { setTimeout(function() { $('.scrollFix').css("pointer-events", "none"); },0); });
哈克解决方法，但通过这样做，我甚至能够使表单input滚动工作。 JS在渲染引擎中强制回stream，这是iOS8 Safari中的错误所在。 当把焦点放在表单元素上时，将高度改为自动也改进了滚动，因为滚动在焦点时被浏览器强制处理。
标记：
<div class="modal-backdrop-container"> <div class="modal-backdrop"> <div class="modal> <!-- Content --> </div> </div> </div>
CSS：
.modal-backdrop-container { z-index: 10; position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100%; } .modal-backdrop { z-index: 10; height: 100%; background-color: rgba(255,255,255,0.5); overflow: auto; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .modal { position: relative; width: 400px; max-width: 100%; margin: auto; background-color: white; }
JS：
// reflow when changing input focus $modalInputs = $('.modal').find(':input'); modalInputs.on('focus', function() { var offsetHeight = modal.$backdrop[0].offsetHeight; modal.$backdropContainer.css({ 'height': 'auto' }); }); modalInputs.on('blur', function() { var offsetHeight = modal.$backdrop[0].offsetHeight; modal.$backdropContainer.css({ 'height': '' }); });
不确定var offsetHeight = modal.$backdrop[0].offsetHeight; 线是必要的，因为这和改变高度值应该强制回stream。
html { overflow: scroll; -webkit-overflow-scrolling: touch; }