Magento ver. 2.4.3-p1 : Avoid scrolling down while block-minicart has an hover effect

Question

Avoid scrolling down while block-minicart has an hover effect

Make sure that the icon cart has an hover effect to the minicart in order to show the list items:

<div class="block block-minicart empty"
 data-role="dropdownDialog"
 data-mage-init='{"dropdownDialog":{
 "triggerEvent" : "hover",
 "appendTo":"[data-block=minicart]",
 "triggerTarget":".showcart",
 "closeOnMouseLeave": true,
 "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>

2.Add to the cart a product (it doesn't matter the product type).

3.Don't do any click in other part of the page, just go directly with the mouse directly to the icon cart.

4.Move your mouse off of the icon cart and when the popup disappears the page will scroll down automatically the page.

Answer 1

Solved

<div class="block block-minicart empty"
 data-role="dropdownDialog"
 data-mage-init='{"dropdownDialog":{
 "appendTo":"[data-block=minicart]",
 "triggerTarget":".showcart",
 "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>

after that add css

.minicart-wrapper {
 &:hover {
 .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.mage-dropdown-dialog {
 display: block !important;
 }
 .minicart-items-wrapper {
 height: max-content !important;
 }
 }
 }