mejiwoo

1
import React, { useEffect, useRef } from 'react'
2

3
const Scrollable = props => {
4
	let ref = useRef()
5
	// const [state, setState] = useState({
6
	// 	isScrolling: false,
7
	// 	clientX: 0,
8
	// 	scrollX: 0,
9
	// })
10

11
	useEffect(() => {
12
		const el = ref.current
13
		if (el) {
14
			const onWheel = e => {
15
				e.preventDefault()
16
				el.scrollTo({
17
					left: el.scrollLeft + e.deltaY * 13,
18
					behavior: 'smooth',
19
				})
20
			}
21

22
			el.addEventListener('wheel', onWheel)
23

24
			return () => el.removeEventListener('wheel', onWheel)
25
		}
26
	}, [])
27

28
	// const onMouseDown = e => {
29
	// 	if (ref && ref.current && !ref.current.contains(e.target)) {
30
	// 		return
31
	// 	}
32
	// 	e.preventDefault()
33

34
	// 	setState({
35
	// 		...state,
36
	// 		isScrolling: true,
37
	// 		clientX: e.clientX,
38
	// 	})
39
	// }
40

41
	// const onMouseUp = e => {
42
	// 	if (ref && ref.current && !ref.current.contains(e.target)) {
43
	// 		return
44
	// 	}
45
	// 	e.preventDefault()
46
	// 	setState({
47
	// 		...state,
48
	// 		isScrolling: false,
49
	// 	})
50
	// }
51

52
	// const onMouseMove = e => {
53
	// 	if (ref && ref.current && !ref.current.contains(e.target)) {
54
	// 		return
55
	// 	}
56
	// 	e.preventDefault()
57

58
	// 	const { clientX, scrollX, isScrolling } = state
59

60
	// 	if (isScrolling) {
61
	// 		ref.current.scrollLeft = scrollX + e.clientX - clientX
62
	// 		let sX = scrollX - e.clientX + clientX
63
	// 		let cX = e.clientX
64

65
	// 		setState({
66
	// 			...state,
67
	// 			scrollX: sX,
68
	// 			clientX: cX,
69
	// 		})
70
	// 	}
71
	// }
72

73
	// useEffect(() => {
74
	// 	document.addEventListener('mousedown', onMouseDown)
75
	// 	document.addEventListener('mouseup', onMouseUp)
76
	// 	document.addEventListener('mousemove', onMouseMove)
77

78
	// 	return () => {
79
	// 		document.removeEventListener('mousedown', onMouseDown)
80
	// 		document.removeEventListener('mouseup', onMouseUp)
81
	// 		document.removeEventListener('mousemove', onMouseMove)
82
	// 	}
83
	// })
84

85
	return (
86
		<div
87
			ref={ref}
88
			// onMouseDown={onMouseDown}
89
			// onMouseUp={onMouseUp}
90
			// onMouseMove={onMouseMove}
91
			className={props._class}
92
		>
93
			{props.children}
94
		</div>
95
	)
96
}
97

98
export default Scrollable
99