Pageable

Pageable copied to clipboard

I've noticed that when scrolling on a trackpad that Pageable has a tendency to scroll through two or more pages (depending on how "aggressive" the scroll gesture was). This is something that I've been able to replicate in multiple browsers (Chrome/Firefox/Safari) and on both Mac and PC.

Should also note that adjusting the swipeThreshold doesn't seem to affect this behavior, and that it is still possible to only scroll one page at a time (albeit with significantly and unnaturally small swipe gestures on the trackpad).

Noticed the same issue, because some devices have an important inertia and keep emitting events for a while (wheel). Playing with the animation timing helped reducing the effect but then the resulting animation was too slow. I wanted to use lodash's debounce with leading edge option, but couldn't override the wheel event handler, which is handled within.

Same problem here.

I have the same problem. 'swipeThreshold' doesn't seems to work. Any other ideas?

This is probably an issue with kinetic scrolling (especially on Apple devices) which always has been problematic. It sends scroll events even after the gesture is completed.

To solve this I think you need to detect the inertia of the scroll and ignore those events. This could help https://github.com/d4nyll/lethargy not sure if it's still maintained though.

Would love to see this implemented, multiple scrolling is super annoying.

Thanks, I'll look in to this 👍

The only downside to lethargy would be that an intentional strong swipe would only scroll maximum one page. A less elegant solution could be to add an extra config option called something like wheelThreshold and, in the wheel event handler, add a condition which checks if Math.abs(e) > this.config.wheelThreshold. I repeat, that's not elegant but so far I am satisfied with the results I am having locally with Safari running on a Mac. Not sure of the impact of this on other machines (with a mouse). Hope this is helpful in some way!

Any progress on this bug?

Hello, would love this to be looked over too +1 :)

We can't use pageable.js because of this bug :(

Anyone found a solution?

Any News ? This bug also affects me, i have a logitech mx ergo trackball, which is responsible for too many events

My solution is making pageable's wheel event disabled and using js's wheel event, triggerd keydown event(ArrowUp, ArrowDown).

For those who still need help with this issue, I fixed it using suggestions from @TuringJest and @jjjinhyeok. The script disables the wheel event and uses Lethargy to move pages when wheel event is detected.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lethargy/1.0.9/lethargy.min.js"></script>
<script>
	var pageable = new Pageable("your-body", {
                //[other options here]
		events: {
			wheel: false,
		},
	});
	var lethargy = new Lethargy(); 
	function fpScroll(e) {
		e.preventDefault()
		e.stopPropagation();
		if (lethargy.check(e) !== false) {
			if (lethargy.check(e) == 1) {
				pageable.prev();
			} else if (lethargy.check(e) == -1) {
				pageable.next();
			}
		}
	}
	document.addEventListener('mousewheel', fpScroll, {
		passive: false
	});
	document.addEventListener('DOMMouseScroll', fpScroll, {
		passive: false
	});
	document.addEventListener('wheel', fpScroll, {
		passive: false
	});
	document.addEventListener('MozMousePixelScroll', fpScroll, {
		passive: false
	});
</script>

This should disable the wheel event in Pageable and have Lethargy listen to all scroll events and then send a next/prev command when a valid scroll is detected.