Getting a horizontal scrollbar due to AOS. When I set overflow-x: hidden, AOS stops working

[Lxxrxns]

This is:

• Question

Specifications

• AOS version: latest
• OS: mobile (Android)
• Browser: mobile / chrome

Steps to Reproduce the Problem

Please see https://www.zneller.nl/
On desktop everything looks fine.
On mobile (you can also use chrome to fake a mobile using the dev tools) I am getting a horizontal scrollbar.
However, when I set overflow-x: hidden on html or body tags, AOS completely stops working.

Please tell me how to remove the horizontal scrolling on mobile.

[Air-Sidney]

Try to use overflow-x: hidden for sections

[Lxxrxns]

Hey Air-Sidney. Sadly that didn't work either. When I realized that it really was only affecting mobile browsers (not even my desktop chrome when I made the window really small) I figured it could have something to do with the viewport settings. I added:

maximum-scale=1.0, user-scalable=no

to the viewport meta setting, and now it works just fine.

Thanks for the help.

[DanielOberlechner]

Hi guys,
I have the same problem like @Lxxrxns .
On mobile I use effect slide in from down to right and from up to left.
If I use those effects I get a x scroll bar. This meta tag with maximum scale like @Lxxrxns does not solve the problem.
On your website on mobile is still a scrollbar visible. (on iPhone 12 Pro Max and even on chrome with mobile viewport)

Is there a right way to do this?
My website: https://danobe.dev

At the moment my website is missing the effects because I only have them in development and I don't want to push this code because of the scrollbar.

It only happens on mobile on desktop it works fine.

Has anyone an idea on how to solve this issue in a clean way? I'm not very satisfied at the moment with this library or maybe I'm to dumb to implement it in a correct way.

Would be happy for any hints!

Daniel

[DanielOberlechner]

I use now anime js instead of aos ... it works like a charme... soon it will release version 4.0

it got better support and more possibilities! :)

[emilytm]

I am also getting this horizontal scroll bar and, using it with Hubspot CMS for custom modules, it is interacting with Hubspot forms and making dropdown fields in forms disabled. Does anyone know why this would be having this effect? The issue with dropdown fields is only happening on pages where I'm getting this horizontal scroll bar with aos-fade on sections of the page.

[sc0rp10n-py]

Hey Air-Sidney. Sadly that didn't work either. When I realized that it really was only affecting mobile browsers (not even my desktop chrome when I made the window really small) I figured it could have something to do with the viewport settings. I added:

maximum-scale=1.0, user-scalable=no

to the viewport meta setting, and now it works just fine.

Thanks for the help.
@Lxxrxns
What framework are you using?
I want to try this method out in nextjs any idea how to do it?

[HamzaArif2022]

Hey Air-Sidney. Sadly that didn't work either. When I realized that it really was only affecting mobile browsers (not even my desktop chrome when I made the window really small) I figured it could have something to do with the viewport settings. I added:

maximum-scale=1.0, user-scalable=no

to the viewport meta setting, and now it works just fine.

Thanks for the help.

thanks so much dude its working
for after i have added the meta tag configuration

[Sharanupatil8]

set overflow-x hidden on body and html tags.

Since it is only happening on mobile browsers, try to use this meta tag It prevents zooming in or out.

[GodRAIZEL]

set overflow-x hidden on body and html tags.

Since it is only happening on mobile browsers, try to use this meta tag It prevents zooming in or out.

worked thanks i only set it on body tag but when i added html aswell it worked