Magento 2 Отключить прокрутку браузера, когда Minicart (DropdownDialog) открыт?

Question

Что касается Magento 2, возможно ли отключить прокрутку в браузере (только для полос прокрутки браузера), пока открыта мини-карта (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, будет развернут аналогичным образом, эта функция будет работать независимо от размера окна (т. Е. Будут работать планшеты и виды на телефон).

Надеюсь, это поможет.