Touch events on splide slider broke smooth scroll

[Timur Daulbaev]

Environment

• Browser: Ubuntu Desktop Chrome 97, Android mobile chrome 97
• Version of smooth-scrollbar: 8.7.3
• Slider: https://splidejs.com (@splidejs/react-splide) ver. 0.6.17

Current Behavior

While scrolling the page, if the touch event hits at horizontal slider with drag = true, smooth scrolling breaks.
The smooth transition disappears and a small movement of the fingers can cause an instant jump (delta Y) of 1000+ pixels.

Expected Behavior

When smooth scroll hitting dragable elements should not break smooth scrolling.

Steps to Reproduce

<smooth-scrollbar>
     <SplideSlider />
<smooth-scrollbar>

I had the same problem with the swiper slider too.

[Daofeng Wu]

Thanks for providing the details! Libraries like the one you are using have to call touchMoveEvent.preventDefault() to perform customized touch scrolling action. However, as per the current design, we ignore any default-prevented events and therefore the touch moving speed will not be tracked. Can you try commenting out the return statement in the following code to see if it works in your environment?

smooth-scrollbar/src/utils/event-hub.ts

Lines 50 to 57 in f998115

 function handler(event: any) { 
   // ignore default prevented events 
   if (event.defaultPrevented) { 
     return; 
   } 
  
   fn(event); 
 } 

[Daofeng Wu]

After a little debugging I found they even call evt.preventDefault() in touch-end events, and this prevents touch trackers from being released. IMHO it's totally unnecessary to do so 🤔

[Daofeng Wu]

Fixed in v8.7.4.

I also created a related discussion in splide: Splidejs/splide#625

[Daofeng Wu]

As we still ignore the default-prevented touchend event, you may need to manually save&restore option.damping, otherwise it will be locked to 0.5:

let damping = 0;
let pointerCount = 0;

container.addEventListener('touchstart', (e) => {
  // save damping
  if (pointerCount === 0) {
     damping = scrollbar.options.damping;
  }

  pointerCount++;
  // more accurate?
  // pointerCount += e.changedTouches.length
});

container.addEventListener('touchend', () => {
  pointerCount--;
  // more accurate?
  // pointerCount -= e.changedTouches.length

  // restore damping
  if (pointerCount === 0) {
    scrollbar.options.damping = damping;
  }
});

See also:

smooth-scrollbar/src/events/touch.ts

Lines 18 to 32 in 7e4e188

 addEvent(target, 'touchstart', (evt: TouchEvent) => { 
   // start records 
   touchRecord.track(evt); 
  
   // stop scrolling 
   scrollbar.setMomentum(0, 0); 
  
   // save damping 
   if (pointerCount === 0) { 
     damping = scrollbar.options.damping; 
     scrollbar.options.damping = Math.max(damping, 0.5); // less frames on touchmove 
   } 
  
   pointerCount++; 
 }); 

smooth-scrollbar/src/events/touch.ts

Lines 49 to 67 in 7e4e188

 addEvent(target, 'touchcancel touchend', (evt: TouchEvent) => { 
   const delta = touchRecord.getEasingDistance(damping); 
  
   scrollbar.addTransformableMomentum( 
     delta.x, 
     delta.y, 
     evt, 
   ); 
  
   pointerCount--; 
  
   // restore damping 
   if (pointerCount === 0) { 
     scrollbar.options.damping = damping; 
   } 
  
   touchRecord.release(evt); 
   activeScrollbar = null; 
 }); 

[Timur Daulbaev]

in my case, after i update to 8.7.4 and manually restoring damping didn't change anything. still had broken behavior.

[Daofeng Wu]

@tdaulbaev have you tried saving&restoring options.damping as I commented above?

[Timur Daulbaev]

Yes!
I guess I'll just turn off smooth scrolling on mobile devices, bacouse mobile browsers provide similar scroll behavior by default

[Daofeng Wu]

Yeah, I totally agree. I'm not too fond of using it on mobile devices either 😆

[Timur Daulbaev]

Thanks!

[Daofeng Wu]

By the way, it seems OK in my demo: https://codesandbox.io/s/splide-smooth-scrollbar-oxmxh?file=/src/index.js

[Timur Daulbaev]

there was an error in my implementation, now everything works!