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:
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:
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?