Disable horizonal scroll function without using overflow-x:hidden function

icecom4
icecom4 used Ask the Experts™
on
My site uses a manual carousel which must be swipped horizonally. It works, but the swipe action causes the whole page to move slightly in addition to the carousel.  Annoying right?

I found a line of code below that disables the whole page from moving...
overflow-x:hidden

Open in new window

But this creates a new problem. There is some sort of bug or conflict with how this line of code interacts with my contact form field input.  On some mobile phones, the input is briefly invisible making it difficult to fill out the form.  When I disable this line of code, it fixes that problem.  I verified this through process of elimination.  

But I still need a way to scroll this carousel  without the whole page moving slightly.  This is mainly on mobile phones, because on larger screens the horizonal movement does not happen.  

Perhaps there is a Java script alternative to prevet the page from moving?  

Feel free to test site HERE.  Enter site>menu>Services  and try to scroll on a mobile phone to see what is happening.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
PANkaj KumarSoftware Developer

Commented:
you can use flex to fix this issue.

Click below for details:
Try flex to fix it
The flex/bootstrap idea of PANkaj is however really good, but will cost a complete rebuild.

I like the site as is, just the side swipe jQuery is not working error free. If you can fix that, the problems should be solved.
I could not reproduce the described error.

Using a Chrome Dev window the error is produces on every swipe, multiple times:
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

Author

Commented:
thanks, it seems this error is mainly on smaller iphone displays, probably not worth the effort to resolve.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial