Scrollbar movement

by Ahmad Baktash Hayeri

HTML

<div id="canvas">
  <div id="bar"></div>
</div>
<i id="info">
  Neutral
</i>

CSS

#canvas {
  margin-top: 100px;
  position: relative;
  height: 300px;
  width: 400px;
  border: 1px solid gray;
}

#bar {
  top: 20px;
  position: relative;
  height: 150px;
  width: 7px;
  background-color: red;
}

#info {}

JavaScript

var isBarDragging = false,
  info = document.getElementById('info'),
  canvas = document.getElementById('canvas'),
  bar = document.getElementById('bar'),
  initialY = bar.offsetTop,
  startPosY,
  barStartOffset;
bar.style.top = '50px'
bar.addEventListener('mousedown', function(e) {
  isBarDragging = true;
  info.innerHTML = 'Dragging';
  startPosY = e.pageY - canvas.offsetTop;
  barStartOffset = bar.offsetTop;
  console.log('=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-');
  console.log('startPosY', startPosY)
  console.log('barStartOffset', barStartOffset);
});
window.addEventListener('mousemove', function(e){
	if(!isBarDragging) return;
  
  var currentY = e.pageY - canvas.offsetTop;
  var distance = currentY - startPosY;
  console.log('move distance', distance + barStartOffset);
  
  bar.style.top = distance + barStartOffset + 'px';
});
window.addEventListener('mouseup', function(e) {
  isBarDragging = false;
  info.innerHTML = 'Neutral';
});