Jump to content
Search Community

Scrolling up/down quickly on mobile makes screen jump to position further down the screen

VUE Health test
Moderator Tag

Go to solution Solved by VUE Health,

Recommended Posts

Hello All. The following is plaguing me. I have two scrollTriggers that work based on screen-width. No issues on desktop, but, on iPhone Safari, we are seeing the a side-effect when the user scrolls quickly down and, then, up to the top again. Quoted report below.

 

"It happens both with the menu toggle and with the drawer tab.

Sometimes I don’t have to click anything, I just scroll up quick the viewport snaps down lower on the page.

It seems as if it’s trying to compensate for positioning on the page and that gets screwed up when you scroll too fast. Maybe something to do with the sticky ISI?"

 

Code below:

 

// APPLY INLINE DISPLAY PROPS TO STICKY NAVS

		gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

		var isiBottom=$('#isiBottom');
		var isiRight=$('#isiRight');

		$(window).on('resize', function(){
			var win = $(this); //this = window
			if (win.width() >= 1900) { 
				$(isiBottom).css('display','none');
				$(isiRight).css('display','block');

			}
			if (win.width() <= 1899) { 
				$(isiBottom).css('display','block');
				$(isiRight).css('display','none');
			}

			ScrollTrigger.refresh();
		});

		// SCROLL CONTROLS FOR BOTTOM ISI

		var windowWidth=$(window).width();

		if(Number(windowWidth)>=1900){
			gsap.to("#isiRight", {
				scrollTrigger: {
					trigger: "#isiAnchor",
					scrub: true,
					start: "top bottom",
					end: "top bottom",
				},
				display: "none",
				ease: "none",
			});
		} else {
			gsap.to("#isiBottom", {
				scrollTrigger: {
					trigger: "#isiAnchor",
					scrub: true,
					start: "top bottom",
					end: "top bottom",
				},
				display: "none",
				ease: "none",
			});
		}

		$('.collapse').on('hidden.bs.collapse', function () {
			ScrollTrigger.refresh();
		});

		$('.collapse').on('shown.bs.collapse', function () {
			ScrollTrigger.refresh();
		});

 

Link to comment
Share on other sites

  • Solution

A change in the order of the code appears to have done the trick. ScrollTrigger.refresh may have been called before registration of the plugin. Although, a number of browsers seem to be more forgiving, in this case, Safari on iOS is not. The method calls were moved after registration and behavior appears to be fine. Thank you.

Link to comment
Share on other sites

It's tough to diagnose without a minimal demo, but I'm relatively confident this has to do with the fact that on many mobile devices (like all iOS ones), the browser actually RESIZES when you switch scroll direction because it shows/hides the address bar. And the "resize" event may be firing a bunch of times while it's animating the address bar in/out. So you're likely calling .refresh() a bunch of times. I wouldn't recommend that. 

 

ScrollTrigger automatically triggers a .refresh() after the resizing is DONE, and it also delays it until scrolling is finished so that it doesn't interfere with momentum-scrolling. 

 

EDIT: looks like you figured out a solution - great. 

Link to comment
Share on other sites

So the solution was to isolate the mobile experience - the desktop/tablet version works as expected as well. This looks like further proof of the effects of invoking .refresh() multiple times due to resize. Thank you @Jack for the help! Code update below for reference:

 

// APPLY INLINE DISPLAY PROPS TO STICKY NAVS

		gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

		var isiBottom=$('#isiBottom');
		var isiRight=$('#isiRight');

		// SCROLL CONTROLS FOR BOTTOM ISI

		var isMobile = {
			Android: function() {
				return navigator.userAgent.match(/Android/i);
			},
			BlackBerry: function() {
				return navigator.userAgent.match(/BlackBerry/i);
			},
			iOS: function() {
				return navigator.userAgent.match(/iPhone|iPad|iPod/i);
			},
			Opera: function() {
				return navigator.userAgent.match(/Opera Mini/i);
			},
			Windows: function() {
				return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
			},
			any: function() {
				return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
			}
		};

		  if(isMobile.any()){

			gsap.to("#isiBottom", {
				scrollTrigger: {
					trigger: "#isiAnchor",
					scrub: true,
					start: "top bottom",
					end: "top bottom",
				},
				display: "none",
				ease: "none",
			});

		  } else {

			$(window).on('resize', function(){
				var win = $(this); //this = window
	
	
				if (win.width() >= 1900) {
	
					$(isiBottom).css('display','none');
					$(isiRight).css('display','block');
	
					gsap.to("#isiRight", {
						scrollTrigger: {
							trigger: "#isiAnchor",
							scrub: true,
							start: "top bottom",
							end: "top bottom",
						},
						display: "none",
						ease: "none",
					});
	
				} else {
					
					$(isiBottom).css('display','block');
					$(isiRight).css('display','none');
	
					gsap.to("#isiBottom", {
						scrollTrigger: {
							trigger: "#isiAnchor",
							scrub: true,
							start: "top bottom",
							end: "top bottom",
						},
						display: "none",
						ease: "none",
					});
	
				}
	
			});

			$(window).trigger('resize');

		  }

		$('.collapse').on('hidden.bs.collapse', function () {
			ScrollTrigger.refresh();
		});

		$('.collapse').on('shown.bs.collapse', function () {
			ScrollTrigger.refresh();
		});

 

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