Перемещение скролла внутри блока
 

Интересует как это можно реализовать допустим скроллы в св-ах будут скрыты и нужно просмотривать содержимое внутри див блока, зажимая кливишу мышки и как бы перетаскивая содержимое внутренности.
Были идеи по нажатию мышки считать изначальные координаты потом добавлять просто разницу смещения в scrollLeft и scrollTop, однако дальше идеи это так и не ушло, сколько не пробовал всё никак не получалось работоспособного кода, возможно из-за того, что требовалось сначала использовать функции mousedown а в ней mouseover для постоянного плавного перемещения скролла. Искал отдельные плагины наткнулся на CustomerScroll и ScrollTo, но мне кажеться они не могут реализовать, то что мне нужно.

а причём события скрола если у вас не скрол а drag and drop ?

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

Спасибо большое работает, я не сильно разбираюсь в ajax мозгов хватило дописать пару строк для того чтобы вправо влево тоже делал, но не можете показать как это сделать именно на jQuery, мне этот код не очень понятен.

Вроде ничего сложного, для вправо-влево добавить x как аналог y, ну и можно добавить пару условий, для того, чтобы на границах не происходило подёргиваний (и не совсем понял причём тут ajax).
Из этого материала должно стать понятно как происходит расчёт.
http://learn.javascript.ru/view-and-position
и можно ещё почитать вот эти рассуждения
http://javascript.ru/forum/site/2927...-i-jquery.html

Спасибо

Кстати, заметил одну особенность хрома: при смене курсора по onmousedown прорисовка происходит не сразу, а только после смешения курсора с исходного положения, в FF, IE и Opera сразу.

<div style="background: green; height: 100px"
  onmousedown="this.style.cursor = 'pointer'"
  onmouseup="this.style.cursor = 'default'"
  onselectstart = "return false"
>
</div>

bes,
Чот было подобное, боролся добавкой по событию, кратковременного принудилово A.onclick() на некий иной элемент