Jump to content
Search Community

Scroll Trigger - ASScroll - pinning

darkgr33n test
Moderator Tag

Go to solution Solved by darkgr33n,

Recommended Posts

Hey all (again!),

 

I'm almost there (I think I said that about a month ago!), but have a small issue that I can't fathom.

I've created two codepen demo's, but one could suffice if you comment out the necessary code between the <!-- ASScroll --> comments ;)

My issue only happens on touch devices. Chrome emulator seems to show the error, but I'm also on an iPhone which behaves the same each time.

 

*note -- i'm only looking at landscape view at the moment -- not portrait.

On desktop, everything is hunky dory, however on mobile screens the pinning isn't happening.

When I set markers:true, I can see that the markers on the scroller move up with the page.

I've setup ASScroll as per the demo, it's the same code, however I'm unsure if I need to create a proxy for every other Scroll Trigger instance as well (the demo shows just one component, but there are several, each with a different animation).

 

the above demo (which seems to be at the bottom of the post for some reason !!) has ASScroll code intact. If you comment out the <!-- ASScroll--> section upi can see the effect --

or

use this demo without ASScroll which works fine on mobile:

See the Pen ExgPMRg by darkgr33n (@darkgr33n) on CodePen

 

all other code is exactly the same in the two demos .

When I first initiate ASScroll, I'm setting the DisableOnTouch opiton as "true" - which is the default - so I'm assuming that, on touch devices, ASScroll is not initiated. 


In my head, I'm thinking that means it should all work exactly as it would if ASScroll was not there - as per the second demo - 
however, as I've been typing this question, I've just realised that, although ASScroll may not be being initiated on mobile, I'm still setting the ScrollTrigger default scroller to ".inner", and setting up the proxy, and I have no idea if it's that breaking things on mobile, or a totally unrelated (and hopefully quick to fix) issue

 

If anyone is able to point me in the right direction that would be very much appreciated.

It could be as ASScroll issue but as it's working so beautifully on desktop I hope it's an easy fix!

 

Cheers!
 

See the Pen XWjXGjJ by darkgr33n (@darkgr33n) on CodePen

Link to comment
Share on other sites

  • Solution

Thanks for the quick reply Zach -- I only realised as I got to the end of the question!

 

OK, so I can get it to work if I do this:
 

ScrollTrigger.matchMedia({
	// please don't touch
    "(pointer: fine)": function() {
    	ScrollTrigger.defaults({
        	scroller: '.inner'
        })
     }
 });

Does that seem reasonable ?

The whole ASScroll call now being:

// ASScroll

var asscroll = new ASScroll.default({
    customScrollbar: true,
    disableOnTouch: true,
    scrollbarHandleEl: '.my-scrollbar-handle',
    disableNativeScrollbar: true
});

ScrollTrigger.matchMedia({
	// please don't touch
	"(pointer: fine)": function() {
		ScrollTrigger.defaults({
			scroller: '.inner'
		})
	}
});

ScrollTrigger.scrollerProxy(".inner", {
    scrollTop(value) {
        return arguments.length ? asscroll.scrollTo(value) : -asscroll.smoothScrollPos;
    },
    getBoundingClientRect() {
        return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }
    }

});

asscroll.on("raf", ScrollTrigger.update);
ScrollTrigger.addEventListener("refresh", () => asscroll.onResize());

window.addEventListener("load", () => {
    var totalScroll = document.querySelector(".asscroll-container").scrollHeight - innerHeight;
    asscroll.enable(false, true, document.querySelector(".inner"));
});

 

Cheers!

 

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...