用鼠标移动滚动Div

Question

我开发了一个特殊平板电脑的Web应用程序（在Linux OS下运行）。 Chromium将触摸屏事件检测为鼠标事件。因此，我使用以下代码来控制滑动手势。

var scrollStartPos=0;
document.getElementById("scrollable").addEventListener("mousedown", function(event) {
	scrollStartPos = this.scrollTop + event.pageY;
	event.preventDefault();
},false);

document.getElementById("scrollable").addEventListener("mousemove", function(event) {
	this.scrollTop=scrollStartPos-event.pageY;
	event.preventDefault();
},false);

.maindata{
	overflow: hidden;
	font-family: sans-serif;
	font-size: 20px;
	font-weight: bold;
	margin-right: 80px
}

.maindata table{
	border-spacing: 10px;
}
.maindata tr{
	border-bottom-width: 5px;
	line-height: 25px;	
}
#dsrcheadtc{
	widht: 40%;
}
#dsrcdatatd{
	background-color: #D3D3D3;
	width: 60%
}

<div class="maindata"><table class="dsrcdata"><tbody id="scrollable">
<tr><td  id="dsrcheadtc">1
  </td><td  id="dsrcdatatd">1
  </td></tr>
  <tr><td  id="dsrcheadtc">2
  </td><td  id="dsrcdatatd">2
  </td></tr>
  <tr><td  id="dsrcheadtc">3
  </td><td  id="dsrcdatatd">3
  </td></tr>
  <tr><td  id="dsrcheadtc">4
  </td><td  id="dsrcdatatd">4
  </td></tr>
  <tr><td  id="dsrcheadtc">5
  </td><td  id="dsrcdatatd">5
  </td></tr>
  <tr><td  id="dsrcheadtc">6
  </td><td  id="dsrcdatatd">6
  </td></tr>
  <tr><td  id="dsrcheadtc">7
  </td><td  id="dsrcdatatd">7
  </td></tr>
  <tr><td  id="dsrcheadtc">8
  </td><td  id="dsrcdatatd">8
  </td></tr>
   <tr><td  id="dsrcheadtc">9
  </td><td  id="dsrcdatatd">9
  </td></tr>
   <tr><td  id="dsrcheadtc">10
  </td><td  id="dsrcdatatd">10
  </td></tr>
   <tr><td  id="dsrcheadtc">11
  </td><td  id="dsrcdatatd">11
  </td></tr>
   <tr><td  id="dsrcheadtc">12
  </td><td  id="dsrcdatatd">12
  </td></tr>
   <tr><td  id="dsrcheadtc">13
  </td><td  id="dsrcdatatd">13
  </td></tr>
</tbody></table></div>

然而问题是，如果我触摸屏幕，鼠标会跳到最后触摸的位置。那不是我想要的。我希望用户能够像在手机上一样向上和向下滑动这个div。但目前这不起作用。很难向下滚动到div的末尾。