Edit in JSFiddle

// Scroll by dragging by Zzbaivong (https://github.com/baivong)

function scrollByDragging(container) {

  function mouseUp(e) {
    if (e.which !== 3) return;

    window.removeEventListener('mousemove', mouseMove, true);
    container.style.cursor = 'default';
  }

  function mouseDown(e) {
    if (e.which !== 3) return;

    pos = {
      x: e.clientX,
      y: e.clientY
    };

    window.addEventListener('mousemove', mouseMove, true);
    container.style.cursor = 'move';
  }

  function mouseMove(e) {
    container.scrollLeft -= (-pos.x + (pos.x = e.clientX));
    container.scrollTop -= (-pos.y + (pos.y = e.clientY));
  }

  var pos = {
    x: 0,
    y: 0
  };

  if (container.clientWidth < container.scrollWidth || container.clientHeight < container.scrollHeight) {
    container.addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);
    container.oncontextmenu = function(e) {
      e.preventDefault();
    };
  }

}

scrollByDragging(document.getElementById('container'));

<div id="container">
  <div id="drag"></div>
</div>

html,
body {
  margin: 0;
  padding: 0;
}

#container {
  width: 400px;
  height: 300px;
  background: #39464E;
  margin: 10px;
  overflow: auto;
}

#drag {
  width: 800px;
  height: 1000px;
  background: #FF9800;
  opacity: 0.7;
}