JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<div id="scrollable">
  <ul>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
  </ul>
</div>

CSS

#scrollable {
  width: 100px;
  height: 100px;
  overflow: scroll;
}

JavaScript

var scrollable = document.getElementById('scrollable')
var curDown = false;
scrollable.addEventListener('mousemove', function (event) {
	if(curDown) {
  	console.log('마우스 이동')
	}
})

scrollable.addEventListener('mousedown', function (event) {
  curDown = true;
	console.log('마우스 다운')
  console.log(scrollable.clientHeight, scrollable.scrollHeight, scrollable.scrollTop)
})

scrollable.addEventListener('mouseup', function (event) {
	curDown = false;	
	console.log('마우스 업')
})