仅在模态为开放式IOS时如何禁用正文滚动 [英] How to disable body scrolling when modal is open IOS only

问题描述

仅iOS/iPhone X/iPhone 7等

IOS only / iPhone X / iPhone 7 etc.

即使jquery模态库也不起作用！ https://jquerymodal.com/-在iPhone上打开模态，就可以滚动主体.

Even jquery modal libraries don't work! https://jquerymodal.com/ - Open the modal on your iPhone and you will be able to scroll the body.

我发现很难找到一种解决方案，该解决方案可以在每次打开模态时停止主体滚动而不使页面跳到顶部(这与页面滚动一样糟糕)

I am finding it very hard to find a solution that stops the body scrolling without making the page jump to the top each time the modal is opened (which is just as bad experience as the page scrolling)

这似乎是很多人遇到的一个大问题.如您所见:

It seems this is a massive problem lots of people experiencing this. As you can see here:

• 如何防止iOS上的身体滚动12情态打开时是什么时候?
• https://stackoverflow.com/questions/49760984/stopping -body-scroll-on-modal-open-bootstrap-4

• How to prevent body scrolling on iOS 12 when modal opened?
• https://stackoverflow.com/questions/49760984/stopping-body-scroll-on-modal-open-bootstrap-4

我没有运气就上网了，有人可以解决吗?！

I have hunted the internet with no luck, has anyone a solution?!

推荐答案

我创建了以下解决方案，该解决方案可在iOS 12上使用！

I've created the following solution, which works on iOS 12!

尽管下面的嵌入式演示使用了Bootstrap 4，但是相同的解决方案在Bootstrap 3中同样有效，因为模式类或事件名称都没有不同.

Although the embedded demo below uses Bootstrap 4, the same solution works equally well with Bootstrap 3 since none of the modal class or event names are different.

步骤1:模态打开时，使用固定位置将body冻结在适当的位置

Step 1: Use fixed positioning to freeze the body in place when the modal is open

当打开Bootstrap模态时，称为.modal-open的类将添加到body.向此类添加以下其他样式:

When a Bootstrap modal is opened, a class called .modal-open is added to the body. Add the following additional styles to this class:

body {
    &.modal-open {
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
    }
}

现在，每当打开模态时，body都将固定在适当的位置，并且大小将与视口本身相同.这完全阻止了滚动，因为无处可滚动！

Now whenever a modal is opened, the body will be fixed in place and sized to the same dimensions as the viewport itself. This completely prevents scrolling because there's nowhere and nothing to scroll to!

但是:这也意味着打开模式会导致页面跳到顶部，因为body不再延伸超过视口的底部边缘(假定页面内容更高).

But: this also means that opening a modal will cause the page to jump to the top, because the body no longer extends past the bottom edge of the viewport (assuming the page content is taller).

第2步:在模式打开时模拟上一个滚动距离

Bootstrap公开了在打开或关闭模式时触发的事件.我们可以使用这些方法通过在打开模态时拉body up 的顶部来解决跳到顶部"的问题，从而使滚动位置看起来没有变化:

Bootstrap exposes events that fire when a modal is opened or closed. We can use these to solve the "jump to the top" issue by pulling the top of the body up when a modal is opened, so that it looks like the scroll position hasn't changed:

$(function() {
    var $window = $(window),
        $body = $("body"),
        $modal = $(".modal"),
        scrollDistance = 0;

    $modal.on("show.bs.modal", function() {
        // Get the scroll distance at the time the modal was opened
        scrollDistance = $window.scrollTop();

        // Pull the top of the body up by that amount
        $body.css("top", scrollDistance * -1);
    });
});

但是，由于window的scrollTop值仍然是0，因此关闭模式时页面仍将跳至顶部.

However, the page will still jump to the top when the modal is closed because the scrollTop value of the window is still 0.

第3步:关闭模式后，重置所有内容

现在，我们只需要挂接到模式关闭时触发的事件，然后将一切恢复原状即可:

Now we just need to hook into the event that fires when the modal is closed and put everything back how it was:

• 删除body
上的固定位置和负上限值
• 将窗口的滚动位置设置回原来的位置

• Remove the fixed positioning and negative top value on the body
• Set the window's scroll position back to what it was originally

$modal.on("hidden.bs.modal", function() {
    // Remove the negative top value on the body
    $body.css("top", "");

    // Set the window's scroll position back to what it was before the modal was opened
    $window.scrollTop(scrollDistance);  
});

不需要手动删除body上的固定位置，因为这是通过.modal-open类设置的，在模态关闭时，Bootstrap会删除该类.

There's no need to manually remove the fixed positioning on the body, because this is set through the .modal-open class, which Bootstrap removes when the modal is closed.

演示

将所有内容放在一起，现在您可以防止在打开模式时在iOS上进行背景滚动而不会丢失滚动位置！

Put it all together, and now you can prevent background scrolling on iOS while a modal is open without losing your scroll position!

在iOS设备上打开以下链接: https://daguy.github.io/ios-modal-fix/

Open the following link on an iOS device: https://daguy.github.io/ios-modal-fix/

这篇关于仅在模态为开放式IOS时如何禁用正文滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！