javascript - Force trackpad to horizontal scroll only in jssmooth scroll? - Stack Overflow

I have lenis scroll page that has a couple of overflow-y auto sections.

It works fine except the macbook trackpad, which makes it scroll both horizontally & vertically.

It seems lenis takes even the smallest fraction of vertical scroll and animates the page. And on trackpad you can't really scroll straight horizontally.

Is there a way to prevent trackpad from scrolling vertically unless some ratio is met?

document.addEventListener('DOMContentLoaded', function () {
  const lenis = new Lenis({
        duration: 1
  })
});

.section {
height: 100vh;
margin: 40px 0;
border: 2px solid red;
}

.container {
overflow-y: auto;
}

.gallery {
background: blue;
width: 200vw;
height: 100px;
}


html.lenis {
  height: auto;
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

<script src="/[email protected]/dist/lenis.min.js"></script>


<div class="section section-1">
<div class="container">
<div class="gallery"></div>
</div>
</div>

<div class="section">
<div class="container">
</div>
</div>

<div class="section section-2">
<div class="container">
<div class="gallery"></div>
</div>
</div>