Scrolls multiple slides on mac laptops track pad swipe

[elverskog]

I'm seeing multiple slide skips on mac laptops track pad swipe. I've seen that this is an issue with various slide libs that respond to scroll-wheel over the years. Something about the deltaY be off by a factor of X on the mac input devices vs a standard mouse. I have vague nightmares of trying to figure out the device and doing some throttling or number adjustment. Just wondering if anyone else is seeing this or if this is a known issue to you.

[elverskog]

Just an update. This only happens in chrome using some kind of track pad.

I removed the triggering of multiple slides going by by adding a debounce of 50ms (let me know if you want that code).

I still get little "scroll bounce" in said browser/setup and am working to remove it if possible. Basically, I think the browser takes control of the event loop until the bounce finishes animating.

My alternate approach may be to debounce not on the scroll function but the slide change function. Basically not letting the a slide scroll until x milliseconds since the last one.

[aka-toxa]

@elverskog hey, how's going with fix? Can you share your code?

[elverskog]

@aka-toxa Ahem. So sorry a little delay (missed this update). After struggling with this for a bit (cross device scroll handling is no joke) In the end, I decided to use a different module that I had used prior (not sure if I should promote it here). I couldn't justify the timesink for the project that needed slides and the owner for the previous module had fixed an issue that I had reported.

[giladaya]

Guys, sorry for not being responsive on this, I'm overrun with work these days.
If anyone can do a PR I'll merge it ASAP.

[Julia-Lavrova]

I use this lib and I also ran into this problem. But I found a solution. It is throttle:

state = {
  curPage: 1,
  isTrottled: false,
}

handleScroll = (from, to) => {
    if (this.state.isTrottled) return;

    this.setState({
      curPage: +to,
      isTrottled: true,
    });

    this.throttle();
};

throttle = () => {
    setTimeout(() => {
      this.setState({ isTrottled: false });
   }, 300);
}
  
render() {
  return(
          <Scroller
            curPage={this.state.curPage}
            onBeforeScroll={this.handleScroll}
          >
            <Page1 />
            <Page2 />
            <Page3 />
          </Scroller>
  ); 
}

[giladaya]

I found the root of the problem: the mac touchpad simulates a wheel interaction with a long decay. This means that we still get wheel events when the page transition has ended, and these events trigger another page scroll.
The solution is to limit the sensitivity of the wheel handler so that the later wheel events won't trigger a scroll.
Hopefully I'll release an update in the coming days.

[karambafe]

I found a solution to the problem in the original library fullpage.js
Its's works well with transDuration 0.7
@giladaya check my PR