Scrolling content by touching and dragging on jQuery

Hello, jQuery, again!

The task of this plugin is scrolling content by touching and dragging.

Used events - mousedown / move / up . By default, this chain of events highlights the contents within the touch.
')
The implementation is a painfully familiar overflow: hidden , wrapping the contents of an element and moving content inside.

Unsolved problems
1. Sometimes, on the verge between the intersection of the bottom edge and the fivefold slowdown, the content shifts upward by a certain interval. It is noteworthy that during the reverse movement (at the moment of crossing this line) the content returns to its place (moves down).

I hope for someone this article will be useful and will find its application.
Welcom in the comments, waiting for your thoughts, your constructive and negative, all that is aimed at improving this code!

Test bench on jsFiddle (52 lines of uncommented code).

Let's start with the markup. We have a block with content:

<div id="content"> <h2>Touch and drag content</h2> <p>Lorem ipsum dolor sit amet...</p> </div> 

 #content { position:absolute; left:50px; top:50px; width:500px; height:350px; text-align:justify; } 

Next is a detailed comment on each action.

 //      (function($){ //       $.fn.touchanddrag = function(){ //       ,     //        ,    css this.wrapInner('<div>'); //     ,    -     //     (box) - ,    (data) -  var box = this, data = this.children(); //    box.css({overflow:'hidden'}); //   data data.css({position:'absolute',cursor:'default'}); //     data.mousedown(function(e){ //      var hgtBox = box.height(), hgtData = data.height(); // ,      if (hgtData>hgtBox) { //   var posTap = e.pageY, //   data   box posData = data.position().top, posShift, //      mouseMove = function(e){ // ,      if (e.which==1){ // ,     posShift = e.pageY-posTap; //       if (data.position().top>0){ //  ,   5   //     data.css({top:(posData+posShift)/5}); //       } else if ((data.position().top+hgtData)<hgtBox){ //      data.css({top:(hgtBox-hgtData)+(posShift/5)}); //       } else { //      data.css({top:posData+posShift}); } } else { mouseUp(); } }, //   mouseUp = function(){ //       $(document).off('mousemove',mouseMove).off('mouseup',mouseUp); $(document).off('mousedown',selection); //    data.css({cursor:'default'}); //         if (data.position().top>0){ //        //     data.animate({top:0},250); //         } else if ((data.position().top+hgtData)<hgtBox) { //        data.animate({top:hgtBox-hgtData},250); } }, //      selection = function(){ if (window.getSelection){window.getSelection().removeAllRanges()} else {document.selection.empty()} return false; }; //       data.css({cursor:'move'}); //       $(document).on('mousedown',selection).on('mousemove',mouseMove); $(document).on('mouseup',mouseUp).on('contextmenu',mouseUp); $(window).on('blur',mouseUp); } }); return this; }; })(jQuery); 

Call the plugin:

 $('#content').touchanddrag(); 

UPD 1 - fixed a bug where content continued to scroll when the mouse button was released outside the frame. Added check

 if (e.which==1) 

UPD 2 - removed key shielding in css objects

 data.css({cursor:'move'})