SCSS

by interlife

HTML

<div class="scroll_area" id="js-scroll_drag_area">
  <div class="scrollinner">
  ここのエリアをスクロールする。
    <ul>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキスト</li>
      <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
    </ul>
  </div>
</div>

SCSS

.scroll_area {
  margin: 2em;
  padding: 2em;
  width: 300px;
  height: 300px;
  background: yellow;
  color: brown;
  overflow: scroll;
  //カーソル変更
  cursor: move;
}

.scrollinner {
  width: 1200px;
  height: 1200px;
}

JavaScript

/*   ドラッグした時
	-------------------------------------------------- */
	$.fn.dragScroll = function() {
	  var target = this;
	  $(this).mousedown(function (event) {
	    $(this)
 				.data('down', true)
 				.data('x', event.clientX)
 				.data('scrollLeft', this.scrollLeft)
 				.data('y', event.clientY)
 				.data('scrollTop', this.scrollTop)
        ;
	    return false;
	  });
	  $(document).mousemove(function (event) {
	    if ($(target).data('down') == true) {
        target.scrollLeft($(target).data('scrollLeft') + $(target).data('x') - event.clientX);
				target.scrollTop($(target).data('scrollTop') + $(target).data('y') - event.clientY);

	      return false; 
	    }
	  }).mouseup(function (event) {
	    $(target).data('down', false);
	  });
	  return this;
	}
  $(document).ready(function () {
    $('#js-scroll_drag_area').dragScroll();
  });