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

【问题标题】：Magento 2 Disable browser scrolling while Minicart (DropdownDialog) is open?Magento 2在Minicart（DropdownDialog）打开时禁用浏览器滚动？
【发布时间】：2018-09-07 21:12:49
【问题描述】：

关于 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>

【问题讨论】：

标签： php jquery magento magento2

【解决方案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 部署，那么无论窗口大小如何，此功能都可以正常工作（即平板电脑和手机视图也可以正常工作）。

我希望这会有所帮助。

【讨论】：