Jump to content
Search Community

ScrollSmoother causes touch scrolling to trigger link click

column5media test
Moderator Tag

Recommended Posts

Having an issue with overflow scrolling on mobile.  I am using ScrollSmoother on my site and when you open the mobile menu I PAUSE Scrollsmoother so that you can overflow scroll the menu.  Pausing ScrollSmoother allows the scrolling to work as expected but when you touch to scroll the menu it instantly clicks the links in the nav and takes you to that page.  I have attached a Codepen showing the issue, to replicate: size the viewport to a mobile size and enable Touch in inspect element and refresh the page.  You'll notice that when you start to drag the menu it instantly clicks the link instead of scrolls.  

I narrowed it down to ScrollSmoother by setting smoother.kill() on menu open and touch scrolling began working normally.  I also noticed through multiple other random tests that the error is possibly coming from gsap's Observer.js _getEvent function.

See the Pen zYjXypN by tbuzelli (@tbuzelli) on CodePen

Link to comment
Share on other sites

Ah, very interesting. This was an edge case that happens on a device that simulates touch events (without using "real" touch events) and I believe it's fixed in the next release of ScrollTrigger which you can preview at: 

https://assets.codepen.io/16327/ScrollTrigger.min.js  (you may need to clear your cache)

 

Here's your demo with that file in place: 

See the Pen MWGdvmW by GreenSock (@GreenSock) on CodePen

 

Better? 

 

In the meantime, here's a function that you can pass your smoother instance to and it should fix the problem: 

function fixClicks(smoother) {
	let paused = smoother.paused,
		wasDragging, observer,
		ignore = e => wasDragging && e.preventDefault();
	smoother.paused = value => {
		if (value) {
			observer = ScrollTrigger.observe({
				type: "touch",
				capture: true,
				onRelease(self, dragging) {
					wasDragging = dragging;
				}
			});
			smoother.content().addEventListener("click", ignore, {capture: true});
		} else {
			observer && observer.kill();
			wasDragging = false;
			smoother.content().removeEventListener("click", ignore, true);
		}
		paused.call(smoother, value);
	};
}

Usage: 

fixClicks(smoother);

 

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