Jump to content
Search Community

Simple scrollproxy with Smooth-scrollbar horizontal scroll

oligsap test
Moderator Tag

Recommended Posts

 

Hey @oligsap

 

You are not giving ScrollTrigger any hint on the x-position-value to use, that you need for horizontal-scrolling.

 

ScrollTrigger.scrollerProxy(scrollbar, {
  scrollTop(value) {
    if (arguments.length) {
      myHorizontalScrollbar.scrollTop = value;
    }
    return myHorizontalScrollbar.scrollTop;
  },
  scrollLeft(value) {
    if (arguments.length) {
      myHorizontalScrollbar.scrollLeft = value;
    }
    return myHorizontalScrollbar.scrollLeft;
  }
});

 

 

I added the neccessary scrollLeft part to your scrollerProxy and it works.

In this scenario where you only just use horizontal scrolling you can probably also get rid off the scrollTop part in there.

 

 

See the Pen 46a9c4d053a15e2167e51a356b953255 by akapowl (@akapowl) on CodePen

 

 

 

  • Like 4
Link to comment
Share on other sites

Hey @oligsap

 

You are setting up your ScrollTriggers before Smooth-Scrollbar is even initiated.

You need to set up your triggers after the initiation of smooth scrollbar - they wouldn't know what's going on otherwise.

 

 

1st: Init your smooth-scroll

2nd: Apply ScrollTrigger's scrollerProxy to tell it what to listen to

3rd: Set up your ScrollTriggers

 

I moved your ScrollTriggers for the button to the end of your JS and it works ( also  I added a start and end, so you can better see, that it works )

 

See the Pen 413181e6f4eef74becc39412364637a4 by akapowl (@akapowl) on CodePen

 

  • Like 3
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...