Prevent Flicking scrolling to next panel when the user swipes within an inner scrollable area (iOS)

[torrejonv]

Description

I am testing Flicking with a set of panels, where one of the panels has an inner scrollable area (not a Flickity carousel, but a regular HTML/CSS scrollable area, with overflow-x: scroll). On iOS, any attempt to scroll (tap and drag) triggers the Flicking action and sends me to another panel.

Is there any guideline on how to prevent internal scrolls from triggering Flickity? I could not locate it in the documentation or the previous issues. Alternatively, is there any guideline on how to exclude a div or element from the Flickity actions? I could invoke .stop() if I could identify the specific HTMLElement the user initially dragged when swiping left or right. I.e. "if user is inside scrollable div, .stop() Flicking".

[malangfox]

Hello @torrejonv.

For this usage, we recommend using e.stop() after holdStart event with checking target of e.axesEvent.inputEvent. We'll consider adding an option to define a class that prevents swipe behavior or adding documentation about how to implement this case. If you run into any difficulties with the implementation, please feel free to leave a comment.

[torrejonv]

Thank you - we could not get it to work e.stop(). While e.stop did prevent the Flicking "move" effect, the inner CSS scroll did not work.

However (and I know this does not sound great), we did get it to work by throwing an exception (throw new Error()) in the holdStart. In that scenario, the "move" effect does not take place, and the inner css scroll works as expected. There is a very ugly error in the console though.

function stopPropagationForScrollableElements(e) {
  if (hasHorizontalScroll(e.axesEvent.inputEvent.srcEvent.srcElement)) {
    e.axesEvent.inputEvent.srcEvent.stopPropagation();
    if (DEBUG) console.log("Scrollable element - stop propagation");
    throw new Error("Flicking library cannot modify native scrollable events");
    // e.stop();
  }
}

[fw6]

Same problem, is there any progress on this issue? :technologist: