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 部署，则无论 window 大小如何，此功能都可以使用（即平板电脑和 phone 视图也可以使用） .

希望对您有所帮助。

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

Magento 2 Disable browser scrolling while Minicart (DropdownDialog) is open?

php

jquery

magento

magento2