I am trying to have a website with a horziontal scroll feature that goes from right to left, so when you scroll up, on a wheel it goes to the left, and then down goes to the right. swipe down or swipe right and it moves to the right. same for the left and up.

I have tried several implementations and nothing seems to work

<template>

  <BackgroundLayer />

  <div class="layout-wrapper">
    <!-- making a container so that we have horizontal scroll,
   and attach a wheel listerner and scroll logic.  -->
    <div class="horizontal-container" @wheel="Scroll">
      
      <!-- Home section -->
    <div class="horizontal-section">
      <ProjectsSection />
    </div>

    <div class="horizontal-section">
      <ContactSection />
    </div>

    <div class="horizontal-section">
      <HomeSection />
    </div>
    
    </div>

    <footer>
    <p>&copy; 2025 Onyedikachukwu Okonkwo</p>
    </footer>
  </div>
</template>`


.horizontal-container {
  height: calc(100vh - 100px);
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;  

}

.horizontal-container::-webkit-scrollbar {
  display: none;
}

.horizontal-section {
  width: 100vw;
  height: 100%;
  min-height: 100%;
  min-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1a1a1a;
  scroll-snap-align: center;
        
}