Horizontal snapped scroll container overlaps with page scrolling (touch)

[Filip785]

I have a container that takes up 100% of the page width that I need to have scroll horizontally and snapped using touch input only.
The issue that I have is when I'm scrolling the page and I come to the container (in the middle of the page) and I try to scroll further down the page it attempts to starts scroll movement, thus stopping page scroll.
I have disabled overflow-y on the container, scrollingY, etc. but nothing seems to matter.
So far, the only way I can fix this is by increasing scrollBoundary to 300, but that requires too much movement to scroll.

This is the code I have so far:

JavaScript:

let scroller = new FTScroller.FTScroller(this.slider, {  
       scrollingX: true,
       snapSizeX: 263,
       scrollingY: false,
       snapping: true,
       singlePageScrolls: true,
       scrollbars: false,
       bouncing: false,
       flinging: false,
       disabledInputMethods: {
               focus: true,
               scroll: true,
               pointer: true,
               mouse: true
         }
});

CSS:

.slider {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        transition: transform 1s;
        overflow-y: hidden;
}

Any ideas on fixing this? Thanks.