Added drag to scroll container
This commit is contained in:
10
components/shared/ScrollContainer/ScrollContainer.module.css
Normal file
10
components/shared/ScrollContainer/ScrollContainer.module.css
Normal file
@@ -0,0 +1,10 @@
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.inner {
|
||||
padding: 2em;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
25
components/shared/ScrollContainer/ScrollContainer.tsx
Normal file
25
components/shared/ScrollContainer/ScrollContainer.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import {FC, PropsWithChildren, useEffect, useRef} from "react";
|
||||
import IndianaDragScoll from "react-indiana-drag-scroll";
|
||||
import styles from './ScrollContainer.module.css'
|
||||
|
||||
export const ScrollContainer: FC<PropsWithChildren> = ({children}) => {
|
||||
const container = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (container.current) {
|
||||
container.current.oncontextmenu = e => e.preventDefault()
|
||||
}
|
||||
}, []);
|
||||
|
||||
return <IndianaDragScoll
|
||||
className={styles.container}
|
||||
buttons={[2]}
|
||||
innerRef={container}
|
||||
hideScrollbars={false}
|
||||
activationDistance={5}
|
||||
>
|
||||
<div className={styles.inner}>
|
||||
{children}
|
||||
</div>
|
||||
</IndianaDragScoll>
|
||||
}
|
||||
Reference in New Issue
Block a user