Jump to content
Search Community

ScrollTrigger breaks when "Stop iOS Safari from resizing the window on scroll" fix is applied

Tonic Creative test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

I am trying to use the scrollTrigger plugin while implementing the fix for the safari scroll issue you flag in this article here.

When I apply the CSS from this it breaks the pages native scroll and therefore the scrolltrigger doesn't fire.

What can I do to resolve this
In the section: Stop iOS Safari from resizing the window on scroll

 

body, html {
    height: 100vh;
    width: 100vw;
    overscroll-behavior: none;
    overflow: hidden !important;
}
#viewport {
    position: fixed;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100vh;
    width: 100vw;
    -webkit-overscroll-behavior: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

https://greensock.com/docs/v3/HelperFunctions#scrollResize


My simple scrollTrigger on the element is just this but it breaks cause the above CSS

ScrollTrigger.create({
      trigger: '#test',
      start: 'top top',
      // endTrigger: '#otherID',
      end: 'bottom 50%+=100px',
      onToggle: (self) => console.log('toggled, isActive:', self.isActive),
      onUpdate: (self) => {
        console.log(
          'progress:',
          self.progress.toFixed(3),
          'direction:',
          self.direction,
          'velocity',
          self.getVelocity()
        );
      }
    });


 

Link to comment
Share on other sites

  • Solution

 

Welcome to the GreenSock forum.

 

First off, I would suggest having a look at ScrollTrigger's normalizeScroll function, which should help with what you are trying to achieve.

 

But as an answer with regard to your scenario: Since your body is not going to be the scroller element anymore in a case as such, you will probably have to define the current element that is now your scroller. This is from the docs:

 

scroller String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.

 

If neither of the suggestions does help in your case, please provide a minimal demo that showcases your issue.

 

I'd also suggest reading up on those threads if you want to stick to your solution as it comes with some side-effects that you might want to consider.

 

 

 

  • 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
  • Recently Browsing   0 members

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