哈克解决方法,但通过这样做,我甚至可以在窗体输入上进行滚动工作。 JS在渲染引擎中强制回流,这是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;
线是必要的,因为既此又改变高度值应强制回流。
我面临着同样的问题。看到这里http://stackoverflow.com/questions/26784118/scrolling-on-ios-设备手指输入标签/ 28862015#28862015。我在那里提供了详细信息,或者是什么导致了我的问题。您能否看到它是否与您一样? – corbin 2015-03-04 19:23:29