forked from crowetic/commerce
improve the detection algorithm to consider touch area
This commit is contained in:
parent
eee3830613
commit
147632f929
@ -21,9 +21,19 @@ const ProductSlider: FC = ({ children }) => {
|
||||
// Stop the history navigation gesture on touch devices
|
||||
useEffect(() => {
|
||||
const preventNavigation = (event: TouchEvent) => {
|
||||
// Center point of the touch area
|
||||
const touchXPosition = event.touches[0].pageX
|
||||
if (touchXPosition > 10 && touchXPosition < window.innerWidth - 10) return
|
||||
event.preventDefault()
|
||||
// Size of the touch area
|
||||
const touchXRadius = event.touches[0].radiusX || 0
|
||||
|
||||
// We set a threshold (10px) on both sizes of the screen,
|
||||
// if the touch area overlaps with the screen edges
|
||||
// it's likely to trigger the navigation. We prevent the
|
||||
// touchstart event in that case.
|
||||
if (
|
||||
touchXPosition - touchXRadius < 10 ||
|
||||
touchXPosition + touchXRadius > window.innerWidth - 10
|
||||
) event.preventDefault()
|
||||
}
|
||||
|
||||
sliderContainerRef.current!
|
||||
|
Loading…
x
Reference in New Issue
Block a user