0

In woodmart theme when mini cart is open the main page is moving but not fix! So I want to stop scrolling when mini cart is opened. When the user opens the cart overlay as mini cart on woodmart, scrolling of the background shouldn't be possible. I have searched and i can't seem to find a workable way around it. Any help is appreciated. My code so far

  // Get references to the necessary elements/
  const miniCartElement = document.querySelector('.wd-close-side wd-fill wd-close-side-opened');
  const bodyElement = document.body;

  // Function to handle the scroll behavior/
  function handleScrolling(e) {
  e.preventDefault();
  }

  // Function to enable/disable scrolling
  function toggleScrolling(enableScrolling) {
  if (enableScrolling) {
    bodyElement.classList.remove('no-scroll');
    bodyElement.removeEventListener('touchmove', handleScrolling);
    } else {
    bodyElement.classList.add('no-scroll');
    bodyElement.addEventListener('touchmove', handleScrolling, { passive: false });
   }
    }

   // Event listener to toggle scrolling when the mini cart is opened/closed
    miniCartElement.addEventListener('click', function () {
    const isOpen = miniCartElement.classList.contains('open');

   // Toggle scrolling based on the mini cart's open/closed state
    toggleScrolling(!isOpen);
     });
Mohsen
  • 300
  • 2
  • 13

1 Answers1

0

Take a look at How to disable scrolling temporarily?.

Also I think the miniCartElement querySelector is missing the class dots.

Good luck!

Colin
  • 1
  • 1
  • Thanks for your response. I add dots and check the link that you mentioned it but It does not working yet. – Mohsen Jun 27 '23 at 15:34
  • Can anyone help me? – Mohsen Jun 27 '23 at 21:25
  • Can you provide a little more info? Did you get the right element now you fixed the dots in your miniCartElement querySelector? Did the no-scroll class got added to the body? – Colin Jun 28 '23 at 11:41
  • yes please see this screenshot: https://s8.uupload.ir/files/screenshot_2023-06-28_at_15-36-33_woodmart_-_multipurpose_woocommerce_theme_wordpress_r823.png I want disable scrolling without any moving when minicart is opened. – Mohsen Jun 28 '23 at 12:07
  • If you need woodmart theme for testing or want to see the source of theme file please let me know to give it to you. – Mohsen Jun 28 '23 at 12:20
  • Add a console.log to see if miniCartElement is the element you expect. If so, check your browser inspector to see if the body element gets the no-scroll class when miniCartElement is open. try to narrow the problem by console logging. – Colin Jun 28 '23 at 14:48