Question

当模态弹出时，我一直试图禁用身体上的滚动。当我打开模态弹出时我添加了身体溢出隐藏，当我关闭弹出窗口时我将其设置为默认状态。这种技术效果很好在所有桌面浏览器中，但在移动设备中没有。为了解决iPod / iPhone中的问题，我添加了

-webkit-overflow-scrolling: touch;

但它在iPad中不起作用。我的代码

function toggleMenu() {
if (!toggle) {
$("body").css("overflow", "hidden");
}else{
$("body").css("overflow", "");
}
toggle = !toggle;

我已经尝试了很多解决方案，建议在堆栈溢出但没有运气。注意：固定位置也试过但没有运气。它适用于除iPod以外的所有其他设备.Donot知道如何解决请有人帮我解决问题。谢谢。

Answer 1

试试这个

IPad in portrait＆amp;景观

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
body{overflow:hidden;}
}

Answer 2

试试这个，

body.modal-open {
    overflow: hidden;
    position:fixed;
    height: 100%;
}

此解决方案具有滚动到顶部的副作用。

如果你想在关闭模态后保持滚动位置，你应该添加更多的处理代码，如下所示。

var scrollPosition;

function onOpenModal(){
    scrollPosition = $('body').scrollTop();
    $('body').css("position", "fixed");
};

function onCloseModal(){
    $('body').css("position", "static");
    $('body').animate({"scrollTop": scrollPosition}, 0);
});

Answer 3

尝试在更改css参数时添加{}更改：

$("body").css("overflow", "hidden");

要：

$("body").css({
   "overflow" : "hidden"
});

隐藏溢出功能无法在iPad中运行

3 个答案: