glide icon indicating copy to clipboard operation
glide copied to clipboard

Stop scrolling page while swipe

Open antonlukin opened this issue 7 years ago • 11 comments

As far as I know there is no option to allow swipe only single axe. For example, when I swipe left/right, the page shouldn't scroll and vice versa.

I've checked similar sliders and most of them stopped scroll while swiping left and right direction. Thinking we should add glide option (or custom plugin) to prevent this annoying jumping.

glide-jump

antonlukin avatar Aug 12 '18 20:08 antonlukin

Agree with with this as it's very annoying. Similar discussion with potential fixes here: https://github.com/pawelgrzybek/siema/issues/37

connorbunting avatar Aug 15 '18 11:08 connorbunting

Any updates here? Unfortunately this behaviour prevent to use glide at full power

antonlukin avatar Oct 02 '18 20:10 antonlukin

I'm still experiencing this issue even after the fix (27b6a34)

yarn list v1.12.3
└─ @glidejs/[email protected]

robbinjohansson avatar Dec 10 '18 12:12 robbinjohansson

Also using v3.2.4 and still experiencing the issue. Would highly appreciate an update on this!

mattias-sanfridsson avatar Dec 11 '18 08:12 mattias-sanfridsson

I noticed the fix referenced for 3.2.4 was anyway removed again here https://github.com/glidejs/glide/commit/4fc497e2b2cd6549b706d21a35a7dc79210c93d5 for 3.2.7.

There doesn't seem to be a way around this issue right now. Any explanation as to why or what we could try would be great. I've tried some workarounds by toggling css properties for overflow or touch-action when the slider events for swipe.start and swipe.end are triggered, but can't get anything to work.

jfbon avatar Aug 02 '19 11:08 jfbon

It works perfectly well on my device (Android 9). I assume this is only an iOS issue, right?

ericmorand avatar Aug 02 '19 12:08 ericmorand

Can confirm. i just tested it on Android and it works fine there.

It basically seems like you are able to scroll diagonally on iOS. Once you release your finger after swiping the slider, the page can continue momentum scrolling. It doesn't seem to respect the touchAngle option in Glide either. Maybe it's part of the problem?

jfbon avatar Aug 02 '19 12:08 jfbon

the same issue for me will be happy like a happy dog after the fix Thank you in adwounce

ovcharenkovv avatar Oct 24 '19 11:10 ovcharenkovv

I'm still experiencing this issue on Safari on iOS as of today, is there any permanent fix or option available?

jeanlouismainguy avatar Jul 20 '20 17:07 jeanlouismainguy

any updates on this?

motion-work avatar May 27 '22 15:05 motion-work

Complete hack, but this works:

const handleTouchEnd = (event) => {
  event.preventDefault();
  const slider = document.querySelector(".SLIDER_WRAPPER");
  slider?.removeEventListener("touchmove", handleTouchMove);
  slider?.removeEventListener("touchend", handleTouchEnd);
};
const handleTouchMove = (event) => {
  event.preventDefault();
};

const handleTouchStart = (event) => {
  event.preventDefault();
  const slider = document.querySelector(".SLIDER_WRAPPER");
  slider?.addEventListener("touchmove", handleTouchMove);
  slider?.addEventListener("touchend", handleTouchEnd);
};

const listenForTouchStart = () => {
  const slider = document.querySelector(".SLIDER_WRAPPER");
  slider?.removeEventListener("touchstart", handleTouchStart);
  slider?.addEventListener("touchstart", handleTouchStart);
};

MakingStuffs avatar Nov 23 '22 16:11 MakingStuffs