Скроллинг рабочей области на JQuery

Визуализация некоторых данных на сайте может требовать наличие только одной рабочей области, к примеру, это могут быть блок-схемы, карта, и т.п. По этой причине может возникнуть необходимость в скроллинге рабочей области. Ярким примером может послужить карта GoogleMaps, на которой реализован механизм click&scroll, иными словами посредством клика и прокрутки можно перемещаться по рабочей области.
Предположим, вам потребовалось сделать нечто подобное со скроллингом, у меня на практике это оказались блок схемы, которые не всегда помещались в видимую часть браузера. Стандартные средства скроллинга браузера в этом случае позволяли просматривать растянувшийся до непонятных размеров блок, но такое дело меня не устраивало. Начался поиск, и было найдено решение, с которым я решил поделиться тут.

Создадим два блока, первый из них будет окном, это та самая видимая область, второй блок на порядок большего размера – рабочая область.
Код html:

<div class="frame">
    <div class="content"></div>
</div>

Код css:

.frame {
	width:300px;
	height:300px;
	overflow:hidden;
}

.content {
	width:4000px;
	height:4000px;
}

Далее необходимо прописать самое основное, это наш обработчик на javascript. Кстати в коде используется библиотека JQuery, это значит, что предварительно её следует подключить на странице.

Код javascript:

var startX = 0;
var offsetXs = 0;
var startY = 0;
var offsetYs = 0;
var onScroll = false;
$(document).ready(function(){

	// запоминаем начальные координаты курсора при клике
	$(".content").mousedown(function(e){
		startX = e.clientX;
		startY = e.clientY;
		onScroll = true;
	});

	$(document.body).mousemove(function(e){
		// отбираем события mousemove после только после клика
		if (onScroll){
			var offsetX = offsetXs + (startX - e.clientX);
			var offsetY = offsetYs+ (startY - e.clientY);

			// перемещение окна
			$(".frame").scrollLeft(offsetX);
			$(".frame").scrollTop(offsetY);
		}
	});

	// записываем координаты после отпускания кнопки мыши
	$(document.body).mouseup(function(){
		onScroll=false;
		offsetXs = $(".frame").scrollLeft();
		offsetYs = $(".frame").scrollTop()
	});

});

Для скроллинга используются методы .scrollLeft() и .scrollTop() библиотеки JQuery. Стандартные скролбары при этом отключаются в css – overflow:hidden.