2021-07-16 02:58:14 -04:00
|
|
|
import React, { useEffect } from "react";
|
2020-05-21 02:46:50 -04:00
|
|
|
|
2021-07-16 02:58:14 -04:00
|
|
|
function usePreventOverscroll(elementRef: React.RefObject<HTMLElement>) {
|
2020-05-21 02:46:50 -04:00
|
|
|
useEffect(() => {
|
|
|
|
// Stop overscroll on chrome and safari
|
|
|
|
// also stop pinch to zoom on chrome
|
2021-07-16 02:58:14 -04:00
|
|
|
function preventOverscroll(event: WheelEvent) {
|
2020-05-21 02:46:50 -04:00
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
const element = elementRef.current;
|
|
|
|
if (element) {
|
|
|
|
element.addEventListener("wheel", preventOverscroll, {
|
|
|
|
passive: false,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
if (element) {
|
|
|
|
element.removeEventListener("wheel", preventOverscroll);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}, [elementRef]);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default usePreventOverscroll;
|