Jump to content
Search Community

Prevent scrolling horizontal before ScrollTrigger

oldskool123 test

By oldskool123
in GSAP

Moderator Tag
 Share
Go to solution Solved by GreenSock,

Recommended Posts

oldskool123 test

oldskool123

Posted
Posted

Hi guys!

I'm new here at GSAP and love it but been struggling with the horizontal scroll a bit in Safari. Couldn't find the right forum for my problem so I'll try here instead.
When scrolling sideways in the first and last container I want to prevent/ disable the scroll, and only make it possible to scroll horizontal when the user is in the middle container. I think it's because of the width in the middle container but how can I solve it? The problem is in all screen sizes and want it responsive. Seems to be working in Chrome but not Safari.

 

Thanks in advance!
Cheers from Sweden

Skärmavbild 2020-12-07 kl. 20.08.21.png

See the Pen qBaNRgq by oldskool123 (@oldskool123) on CodePen

Link to comment
Share on other sites
ZachSaucier test

ZachSaucier

Posted
Posted

Hey oldskool123 and welcome to the GreenSock forums. Very peculiar bug! It definitely seems like something is going wrong in Safari. I am able to prevent the horizontal scrolling in Safari by applying  

html { overflow-x: hidden; }

However, this seems to completely break scrolling once the container is pinned! We'll investigate to see if we can work around this bug somehow.

Link to comment
Share on other sites
GreenSock test

GreenSock

Posted
Posted

Nah, I'm pretty sure that's not a bug with ScrollTrigger or anything - it's just some quirks in the way various browsers handle overflow and whether they scroll on the body or html element. This seemed to work for me:  

html {
	overflow-y: scroll;
	height: 100%;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}
body {
	overflow-y: visible;
	position: relative;
}
html, body {
	overflow-x: hidden;
	margin: 0;
}

And @ZachSaucier, the reason vertical scrolling stopped when you just applied overflow-x: hidden to the html element had to do with the fact that when the super-wide element was pinned (and thus position: fixed), it was  obscuring the scrollbar on the <body>. Pretty weird, I know. But the goal of the CSS above is to make the html element be the one that's scrolling instead of the <body> so that position: fixed is incorporated into that rather than sitting on top of the <body> scroller. Does that make sense (sorta)? 

 

This may be helpful: https://teamtreehouse.com/community/overflow-hidden-not-working-in-ios-safari

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...