Re-enable default vertical scroll after horizontal scroll completes

so I am stuck with this functionality where I want to create a section with horizontal scrolling in between normal and vartical sections

For the page building I am using visual composer for scroll I used this code of javascript:

<script>
document.addEventListener("DOMContentLoaded", function() {
  const containers = document.querySelectorAll('.sticky-container .wpb_wrapper');
  console.log('Containers found:', containers);

  if (containers.length === 0) {
    console.log('No containers found, please check the querySelector.');
  }

  containers.forEach(function(container) {
    container.addEventListener("wheel", function (e) {
     
        if (e.deltaY > 0) {
       
        container.scrollLeft += 100;
        e.preventDefault();
      } else {
        container.scrollLeft -= 100;
        e.preventDefault();
      }
    });
  });
})
</script>

The above code works fine until you reach sticky-container and it scrolls the content horizontally but the problem arises when the content has finished scrolling it won’t go ahead to next section or I’d say doesn’t enable vertical scroll.

My website: https://bananablossom.niceone.digital/?salient_g_sections=horizontal-scrolling-by-jashua

I also this codepen https://codepen.io/alvarotrigo/pen/VwWMjVp but it isn’t useful with Visual Composer rows.

Please note there are many solutions but I am using visual composer and that is making the real difficulty.