Can't scroll when using ion-segment


I am designing a web app at the moment and I have a banner at the top of the page with an ion-segment below the banner. I then have ngIfs to check which segment is selected and display the appropriate component.

This all works great but the issue is when I am viewing the page in my browser I have issues scrolling using the mouse wheel. It seems as if the main page and the component that is swappped out have separate scrolling areas as I can only scroll when my mouse is outside of the component that is being swapped when the different segments are clicked on. Does anybody know of a way to fix this by any chance?