[bes]

<div id="myDiv" style="position: fixed; width: 50%; height: 50%; background: lightgrey; overflow: hidden;">
  <div id="div1">
  </div>
</div>

<script>
window.onload = function () {//onload begin
  var myDiv = document.getElementById('myDiv');
  var div1 = document.getElementById('div1');

  var str="";
  for (var i = 0; i < 51; i++) {
    for (var j = 0; j < 51; j++) {
      str += i;
    }
    str += '<br>';
  }
  div1.innerHTML = str;


  myDiv.onselectstart = function () {return false}

  myDiv.onmousedown = function (e) {//onmousedown begin
    e = e || event;
    myDiv.style.cursor = 'pointer';
    myDiv.style.overflow = 'scroll';
    var y0 = e.clientY;
    var x0 = e.clientX;
 
    myDiv.onmousemove = function (e) {//onmousemove begin
      e = e || event;
 
      var y = e.clientY;
      var defY = myDiv.scrollHeight - myDiv.offsetHeight - myDiv.scrollTop ;

      if (y > y0 && defY > 0) {
        myDiv.scrollTop += 20;
       } else  if (y < y0) {
         myDiv.scrollTop -= 20;
       }
      y0 = y; 
 
      var x = e.clientX;
      var defX = myDiv.scrollWidth - myDiv.offsetWidth - myDiv.scrollLeft ;

      if (x > x0 && defX > 0) {
        myDiv.scrollLeft += 20;
       } else  if (x < x0) {
         myDiv.scrollLeft -= 20;
       }
      x0 = x; 

    }//onmousemove end

  }//onmousedown end

  document.onmouseup = function () {
   myDiv.style.cursor = 'default';
   myDiv.style.overflow = 'hidden';
   myDiv.onmousemove = null;
  }

}//onload end

</script>

<div id="myDiv" style="position: fixed; width: 50%; height: 50%; background: lightgrey; overflow: hidden;">
  <div id="div1">
  </div>
</div>

<script>
window.onload = function () {//onload begin
  var myDiv = document.getElementById('myDiv');
  var div1 = document.getElementById('div1');

  var str="";
  for (var i = 0; i < 51; i++) {
    for (var j = 0; j < 51; j++) {
      str += i;
    }
    str += '<br>';
  }
  div1.innerHTML = str;


  myDiv.onselectstart = function () {return false}

  myDiv.onmousedown = function (e) {//onmousedown begin
    e = e || event;
    myDiv.style.cursor = 'pointer';
    myDiv.style.overflow = 'scroll';

    var y0 = e.clientY;
    var x0 = e.clientX;
 
    myDiv.onmousemove = function (e) {//onmousemove begin
      e = e || event;
 
      var y = e.clientY;

      if (y > y0) {
        myDiv.scrollTop -= 20;
       } else  if (y < y0) {
         myDiv.scrollTop += 20;
       }
      y0 = y; 
 
      var x = e.clientX;
 
     if (x > x0) {
        myDiv.scrollLeft -= 20;
       } else  if (x < x0) {
         myDiv.scrollLeft += 20;
       }
      x0 = x; 

    }//onmousemove end

  }//onmousedown end

  document.onmouseup = function () {
   myDiv.style.cursor = 'default';
   myDiv.style.overflow = 'hidden';
   myDiv.onmousemove = null;
  }

}//onload end

</script>