0

I'm building a carousel that is driven by native browser scroll and this overscroll effect on mobile devices is breaking infinite scroll functionality. Example:

enter image description here

For iOS 16 and above I'm using overscroll-behavior: none; it works like a charm. But this CSS property is not supported on lover iOS versions (CanIUse). I need the carousel to be compatible with iOS 14 production mode.

I tried disableing overscroll effect using JavaScript but it introduced a flickering effetc. Example:

enter image description here

Code sample:

const handleScroll = e => {
    const target = e.currentTarget;

    //Disable overscroll
    if (target.scrollLeft <= 0) {
        target.scrollLeft = 0;
    } else if (target.scrollLeft >= target.scrollWidth - target.clientWidth) {
        target.scrollLeft = target.scrollWidth;
    }
};

carousel?.addEventListener('scroll', handleScroll, { passive: false });

Is there a UX friendly approuch to disable horizontal overscroll on iOS <=15?

zimex
  • 713
  • 1
  • 5
  • 10

0 Answers0