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 部署，则无论窗口大小如何，此功能都将起作用（即平板电脑和手机视图也将起作用）。

我希望这有帮助。