Верстка и js блока со скролингом

example.html

<div class="l-scroll_pane-container">
	<div class="l-scroll_pane-work_area">
		<ul class="l-scroll_pane g-clrfix">
			<li class="b-categories-item ">
				<input type="hidden" value="d64d7a39-3045-4206-a843-42c816ad7f04">
				<div class="b-categories-image b-categories-image--object"></div>
				<p class="b-categories-name">Товары</p>
			</li>
			<li class="b-categories-item b-categories-item--active">
				<input type="hidden" value="9c4c930a-26bd-4ec9-9fc3-727f26e0ed0f">
				<div class="b-categories-image b-categories-image--jobs"></div>
				<p class="b-categories-name">Работа</p>
			</li>
			<li class="b-categories-item ">
				<input type="hidden" value="0f59f524-84c0-4072-a6df-415881407cc1">
				<div class="b-categories-image b-categories-image--housing"></div>
				<p class="b-categories-name">Недвижимость</p>
			</li>
			<li class="b-categories-item ">
				<input type="hidden" value="bf917777-2ce7-403a-b372-0f33a2f112a3">
				<div class="b-categories-image b-categories-image--services"></div>
				<p class="b-categories-name">Услуги</p>
			</li>
			<li class="b-categories-item ">
				<input type="hidden" value="cb62bb77-a38d-4c77-b203-702c6638bab2">
				<div class="b-categories-image b-categories-image--travel"></div>
				<p class="b-categories-name">Туризм</p>
			</li>
		</ul>
	</div>
</div>

example.js

initDDScroll: function(viewEl, jsp, scrollContainer, initElements) {
	var dragDummy = $('<div>')
			.addClass('b-drag-dummy')
			.appendTo($(scrollContainer, viewEl)),
		mouseClicked = NO,
		mouseScroll = NO,
		mouseStartPos = {
			y: 0
		};

	$(viewEl)
		.delegate(initElements, 'mousedown mouseup', function(event) {
			var target = $(event.target),
				tagName = target[0].tagName.toLocaleLowerCase();

			if (tagName != 'input' && tagName != 'textarea') {
				event.preventDefault();
			}
			mouseClicked = !!(event.type == 'mousedown');

			if (mouseClicked) {
				mouseStartPos = {
					y: event.clientY,
					scrollTop: Math.abs(parseInt($('.jspPane', viewEl).css('top'), 10))
				};
			} else {
				if (mouseScroll) {
					dragDummy.hide();
					setTimeout(function() {
						mouseScroll = NO;
					}, 100);
				}
			}
		}.bind(viewEl))
		.delegate(scrollContainer, 'mousemove', function(event) {
			if (mouseClicked) {
				var diff = {
					y: mouseStartPos.y - event.clientY
				}

				dragDummy.show();
				jsp.scrollTo(0, mouseStartPos.scrollTop + diff.y);
				mouseScroll = YES;
			}
		});
},

init.js

SLB.view.initDDScroll(this.el, scrollPane, '.b-params-scroll', '.b-params-title, .b-params-scroll');