caxez

I have the following code <div class="scrollbar"> <main class="main-container"> <section class="section">1</section> <section class="section">2</section> <section class="section">3</section> <section class="section">4</section> </main> </div> <script src="https://unpkg.com/smooth-scrollbar@latest/dist/smooth-scrollbar.js"></script> .main-container { display: flex; position: relative; height: 100vh; } .section { background-color: #eae8e5; height: 100%; min-width: 100vw; } class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin { static pluginName = 'horizontalScroll'; transformDelta(delta, fromEvent) { if (!/wheel/.test(fromEvent.type)) { return delta; } const { x, y } = delta; return { y: 0, x: Math.abs(x) > Math.abs(y) ? x : y, }; } } Scrollbar.use(HorizontalScrollPlugin); const scrollbar = Scrollbar.init(document.querySelector('.scrollbar'), { damping: 0.1, delegateTo: document, alwaysShowTracks: true, }); Scrollbar.detachStyle(); I want it to be fixed on scroll when a block reaches a corner without preventing other blocks from scrolling as in this example https://codepen.io/akapowl/pen/abmpGQv/d076a9cf4c1a952a0bc921a76bc2202f Thanks in advance everyone