答案 0 :(得分:8)
尝试将position: fixed
添加到页面正文中。
答案 1 :(得分:4)
撇开ybentz的回答。如果使用bootstrap模式,则可以将其添加到main.js文件中:
var savedScrollPosition;
$(document).on('show.bs.modal', '.modal', function() {
savedScrollPosition = $(window).scrollTop();
});
$(document).on('hidden.bs.modal', '.modal', function() {
window.scrollTo(0, savedScrollPosition);
});
然后这是你的css,因为你已经在模态弹出的时候添加了模态开放类:
body.modal-open {
position: fixed;
width: 100%;
}
感谢ybentz的帮助!!我会回复你的评论,但我还没有这样做的声誉。
答案 2 :(得分:0)
Ignacios Answer为我解决了这个问题。 如果我显示覆盖层/模态我添加固定到正文的类。 还要添加到css这个规则:
body.fixed{
position: fixed;
}
答案 3 :(得分:0)
我遇到了同样的问题,position: fixed
上的body
解决方案确实解决了这个问题,所以这很好。需要注意的一点是,将类添加到body
会导致浏览器“跳转”到页面顶部,因此当弹出/模态关闭时将其删除可能会让用户感到困惑。
如果你的popup / modal在iOS上是全屏的,你可以做的就是保存滚动位置,然后在添加position: fixed
类之前使用类似的东西(使用jQuery但可以使用{{3 }}):
var savedScrollPosition = $(window).scrollTop()
$('body').addClass('has-fullscreen-modal')
然后在弹出窗口关闭时恢复它:
$('body').removeClass('has-fullscreen-modal')
window.scrollTo(0, savedScrollPosition)
你的css将是
body.has-fullscreen-modal {
position: fixed;
}
希望有所帮助!
答案 4 :(得分:0)
就个人而言,position: fixed
会自动滚动到顶部。真烦人!
为了避免惩罚其他设备和版本,我只将此修复程序应用于相应的iOS版本。
适用于javascript / jQuery
$(document).ready(function() {
// Detect ios 11_x_x affected
// NEED TO BE UPDATED if new versions are affected
var ua = navigator.userAgent,
iOS = /iPad|iPhone|iPod/.test(ua),
iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);
// ios 11 bug caret position
if ( iOS && iOS11 ) {
// Add CSS class to body
$("body").addClass("iosBugFixCaret");
}
});
对于CSS
/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }
我修改了仅针对具有类.inputModal
只有带输入的模态才会受到影响,以避免滚动到顶部。
适用于javascript / jQuery
$(document).ready(function() {
// Detect ios 11_x_x affected
// NEED TO BE UPDATED if new versions are affected
(function iOS_CaretBug() {
var ua = navigator.userAgent,
scrollTopPosition,
iOS = /iPad|iPhone|iPod/.test(ua),
iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);
// ios 11 bug caret position
if ( iOS && iOS11 ) {
$(document.body).on('show.bs.modal', function(e) {
if ( $(e.target).hasClass('inputModal') ) {
// Get scroll position before moving top
scrollTopPosition = $(document).scrollTop();
// Add CSS to body "position: fixed"
$("body").addClass("iosBugFixCaret");
}
});
$(document.body).on('hide.bs.modal', function(e) {
if ( $(e.target).hasClass('inputModal') ) {
// Remove CSS to body "position: fixed"
$("body").removeClass("iosBugFixCaret");
//Go back to initial position in document
$(document).scrollTop(scrollTopPosition);
}
});
}
})();
});
对于CSS
/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }
适用于HTML 将类 inputModal 添加到模态
<div class="modal fade inputModal" tabindex="-1" role="dialog">
...
</div>
Nota bene javascript函数现在是自我调用的
参考:iOS 11 Safari bootstrap modal text area outside of cursor
答案 5 :(得分:-1)
我已用此CSS修复了此问题
@media(max-width:767px) {
body {
position:fixed !important;
overflow:auto !important;
height:100% !important;
}
}