search

michalsnik / aos

Animate on scroll library
MIT License
26.76k stars 2.59k forks source link

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

Open Lxxrxns opened 1 year ago

Lxxrxns commented 1 year ago

This is:

Specifications

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 commented 1 year ago

Try to use overflow-x: hidden for sections

Lxxrxns commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 12 months ago

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 commented 9 months ago

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 commented 7 months ago

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 commented 4 months ago

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