Скроллинг страницы "Рукой"

[Че Гевара]

Подскажите пожалуйста как реализовать перемещение по странице курсором, зажимая кнопку мыши и перетаскивая страницу в сторону.

[Naive]

Событие нажатия onmousedown, для тачпадов — ontouchstart,
первым аргументом в обработчик попадает событие со свойствами pageX, pageY, передающих координаты клика/прикосновения, только прикосновение зарывается в массив ивента, это либо touches, либо changedTouches. Собственно для этой задачи надо взять нулевой объект, который выдаст все те же pageX, pageY.
События движения — onmousemove, ontouchmove, обработка аналогична.
Окончание действия: onmouseup, ontouchend. Обработка все та же.
Советую по окончанию убивать слушателей движения и окончания, а при начале их создавать, чтобы лишний раз не грузить оперативу.

Забыл сказать, сама промотка страницы: window.scrollTo(), принимает 2 аргумента, по х и по у, если юзать jQuery, то $('html body').scrollLeft(X).scrollTop(Y);

Вот, нашел свой кусок кода, который двигает ползунок тут (на машинке)
При желании можно адаптировать

$cc.on('mousedown touchstart',function(e){
    if (e.type === "touchstart") {
      var e = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
    };
    var strt = e.pageX - $(this).offset().left,
        offset = $layout.offset().left,
        before = width*.5,
        crnt = before;
    $('body').on('mousemove touchmove',function(e){
      if (e.type === "touchmove") {
        var e = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
      };
      var current = e.pageX - offset - strt;
      current = Math.min( Math.max(min_d, current), width);
      crnt = current;
      $roller.width(width - current);
      return false;
    });
    $('body').on('mouseup touchend',function(){
      $(this).off('mousemove touchmove');
      $train[0].width(0);
      $train[1].width(0);
      setInterval(function(){
        clearInterval(_timer);
      },200);
    });
    var _timer = setInterval(function(){
      var _train = before-crnt;
      before = crnt;
      if (_train>0) {
        $train[0].width(0);
        $train[1].width(Math.abs(_train));
      } else {
        $train[0].width(Math.abs(_train));
        $train[1].width(0);
      };
    }, 100);
  });

[Че Гевара]

Naive, огромное спасибо, что откликнулись, подсказали и даже пример дали. Набросал свою реализацию под свои цели(есть огромная страница и надо её таскать по экрану), пусть коряво, но для третьего дня знакомства с javasсript пойдёт. Вроде бы работает. Пока только для мыши.

var mX1,mY1; // Координаты касания
var deltaX,deltaY;//Изменение координат
var m_down_flag = false;//Статус кнопки мыши
 
// Зажата клавиша мыши
window.onmousedown = function(e){
	e.preventDefault()
    m_down_flag = true;
    mX1 = e.pageX;
	mY1 = e.pageY; 
    document.body.style.cursor = "move";
	}
	
// Отпущена клавиша мыши
window.onmouseup = function(){
    m_down_flag = false;
	document.body.style.cursor = "auto";
	}

//Тащим страницу
window.onmousemove=function(e){
	if(m_down_flag){//Если кнопка нажата
	deltaX = mX1 - e.pageX;
	deltaY = mY1 - e.pageY;
	window.scrollBy(deltaX,deltaY);
    }
	}

[Naive]

e.preventDefault()

а клики по странице после этого работают?

П.С. код не плох, особенно для третьего дня знакомства с js, единственное, он обрубает любые другие действия по перетаскиванию. Ну и глобальные переменные ЗЛО, так что это все можно обернуть во врапер

"use strict"; // по желанию, конечно, но помогает избежать нелепых ошибок наследования
(function(window, undefined){
  // твой код
})(window);

document.body.style используется дважды, можно закешировать. И таки лучше играть со слушателями событий.

[Че Гевара]

а клики по странице после этого работают?

Если Вы имеете ввиду переходы по ссылкам, то не знаю, не проверял, да они мне в бщем то и не нужны, там конечно будут у страницы доп функции, но я хочу их потом вынести в своё контекстное меню(где-то слышал, что так можно).А в первую очередь страница является картой, и ссылок там не требуется.Главное масштабирование и скролингА если вопрос был про onmousedown, onmouseup, то на них никак не повлияло e.preventDefault()

глобальные переменные ЗЛО, так что это все можно обернуть во врапер

Спасибо, обернул

И таки лучше играть со слушателями событий.

А можн ссылочку где об этом хорошо и понятно расписано, буду разбираться