Magento 2在打开Minicart（DropdownDialog）时禁用浏览器滚动吗？

Question

关于Magento 2，是否可以在打开Minicart（DropdownDialog）时禁用浏览器中的滚动（仅针对浏览器的滚动条）？

屏幕截图：

        <div class="block block-minicart empty"
         data-role="dropdownDialog"
         data-mage-init='{"dropdownDialog":{
            "appendTo":"[data-block=minicart]",
            "triggerTarget":".showcart",
            "timeout": "2000",
            "closeOnMouseLeave": false,
            "closeOnEscape": true,
            "triggerClass":"active",
            "parentClass":"active",
            "buttons":[]}}'>
        <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
            <!-- ko template: getTemplate() --><!-- /ko -->
        </div>
        <?php echo $block->getChildHtml('minicart.addons'); ?>
    </div>

Answer 1

为了快速演示，我将直接使用文件

/vendor/magento/module-checkout/view/frontend/web/js/view/minicart.js

但是我这样做只是为了给您一个想法。

您将要执行的实际实现应扩展minicart.js，我希望您对此有所了解，或者其他地方有足够的资源可用。

无论如何，在minicart.js文件中有类似的代码

miniCart.on('dropdowndialogopen', function () {
    initSidebar();
});

这在迷你车打开时执行。因此，您可以编辑如下内容：

miniCart.on('dropdowndialogopen', function () {
    initSidebar();
    $('body').css('overflow','hidden');
});

为了在微型购物车关闭时重新启用滚动功能，请在上方代码的正下方添加此代码

miniCart.on('dropdowndialogclose', function () {
    $('body').css('overflow','scroll');
});

minicart.js（默认情况下）几乎部署在所有页面上，除了我猜想的结帐。如果您确定自己的构图能够以相同的方式覆盖minicart.js部署，则此功能无论窗口大小如何都将起作用（即，平板电脑和手机视图也将起作用）。

我希望这会有所帮助。