mejiwoo
98 строк · 2.0 Кб
1import React, { useEffect, useRef } from 'react'2
3const Scrollable = props => {4let ref = useRef()5// const [state, setState] = useState({6// isScrolling: false,7// clientX: 0,8// scrollX: 0,9// })10
11useEffect(() => {12const el = ref.current13if (el) {14const onWheel = e => {15e.preventDefault()16el.scrollTo({17left: el.scrollLeft + e.deltaY * 13,18behavior: 'smooth',19})20}21
22el.addEventListener('wheel', onWheel)23
24return () => el.removeEventListener('wheel', onWheel)25}26}, [])27
28// const onMouseDown = e => {29// if (ref && ref.current && !ref.current.contains(e.target)) {30// return31// }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// return44// }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// return55// }56// e.preventDefault()57
58// const { clientX, scrollX, isScrolling } = state59
60// if (isScrolling) {61// ref.current.scrollLeft = scrollX + e.clientX - clientX62// let sX = scrollX - e.clientX + clientX63// let cX = e.clientX64
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
85return (86<div87ref={ref}88// onMouseDown={onMouseDown}89// onMouseUp={onMouseUp}90// onMouseMove={onMouseMove}91className={props._class}92>93{props.children}94</div>95)96}
97
98export default Scrollable99