Search code examples
csswordpressmobilescroll

Disable horizontal scrolling while overflow-x is unset

I am having this issue on the mobile view of my site, where the scroll is sticky and jumpy. I have used the mobile breakpoint code inside (with overflow-x: unset!important;) as instructed, and it works great to fix the scroll issue. Unfortunately, it means that I can't also use overflow-x: hidden to hide the horizontal scroll. My site has animations and calls for the hidden x-axis scroll otherwise there's whitespace. Anyone have any suggestions on how to get the best of both worlds?

You can find my site here. Code is below:

@media only screen and (max-width: 1045px){
html, body {
    overflow-x: unset!important;
    -webkit-overflow-scrolling: unset!important;
    overflow-y: unset!important;
}
}
Solution

  • you can add try something like below..

    @media only screen and (max-width: 1045px){
html, body {
   overflow-x: clip;
}
}