Edit in JSFiddle

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

function scrollByDragging(container, disableH, disableV) {

  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) {
    if (!disableH && testH) container.scrollLeft -= (-pos.x + (pos.x = e.clientX));
    if (!disableV && testV) container.scrollTop -= (-pos.y + (pos.y = e.clientY));
  }

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

  if (container.clientWidth < container.scrollWidth) testH = true;
  if (container.clientHeight < container.scrollHeight) testV = true;

  container.oncontextmenu = function(e) {
    e.preventDefault();
  };

  if (!testV && !testH || disableH && disableV) return;

  container.addEventListener('mousedown', mouseDown, false);
  window.addEventListener('mouseup', mouseUp, false);

}

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;
}