Improve panning performance using requestAnimationFrame

by codef0rmer

HTML

<div>
    <section xmlns="http://www.w3.org/1999/xhtml" class="chapter" title="Chapter 1. Introduction" epub:type="chapter" xmlns:epub="http://www.idpf.org/2007/ops" id="introduction"><h2 class="title"><span id="p1-textid1">Chapter </span><span id="p1-textid2">1. </span><span id="p1-textid3">Introduction </span></h2><p><span id="p1-textid4">If </span><span id="p1-textid5">you’re </span><span id="p1-textid6">expecting </span><span id="p1-textid7">a </span><span id="p1-textid8">run-of-the-mill </span><span id="p1-textid9">best </span><span id="p1-textid10">practices </span><span id="p1-textid11">manual, </span><span id="p1-textid12">be </span><span id="p1-textid13">aware </span><span id="p1-textid14">that </span><span id="p1-textid15">there’s </span><span id="p1-textid16">an </span><span id="p1-textid17">ulterior </span><span id="p1-textid18">message </span><span id="p1-textid19">that </span><span id="p1-textid20">will </span><span id="p1-textid21">be </span><span id="p1-textid22">running </span><span id="p1-textid23">through </span><span id="p1-textid24">this </span><span id="p1-textid25">one. </span><span id="p1-textid26">While </span><span id="p1-textid27">the </span><span id="p1-textid28">primary </span><span id="p1-textid29">goal </span><span id="p1-textid30">is </span><span id="p1-textid31">certainly </span><span id="p1-textid32">to </span><span id="p1-textid33">give </span><span id="p1-textid34">you </span><span id="p1-textid35">the </span><span id="p1-textid36">information </span><span id="p1-textid37">you </span><span id="p1-textid38">need </span><span id="p1-textid39">to </span><span id="p1-textid40">create </span><span id="p1-textid41">accessible </span><span id="p1-textid42">EPUB </span><span id="p1-textid43">3 </span><span id="p1-textid44">publications, </span><span id="p1-textid45">it </span><span id="p1-textid46">also </span><span id="p1-textid47">seeks </span><span id="p1-textid48">to </span><span id="p1-textid49">address </span><span...

CSS

div {
      width:100%;
      position:absolute;
      background: gray;
      cursor: move;
}

body{
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}

JavaScript

$(document).ready(function() {
    var self = {};
    
    $('div').on('mousedown', function(e) {
        self.panStartX = e.pageX;
        self.panStartY = e.pageY;
        self.mouseDown = true;
        self.pageTop = parseInt($(this).css('top'), false) || 0;
        self.pageLeft = parseInt($(this).css('left'), false) || 0;
        window.requestAnimationFrame(update);
    }).on('mousemove', function(e) {
        self.panEndX = e.pageX;
        self.panEndY = e.pageY;
        
        /*if (self.mouseDown) {
            var pageTop = self.pageTop;
            var pageLeft = self.pageLeft;
            self.panEndX = e.pageX;
            self.panEndY = e.pageY;
            
            if (self.panStartY > self.panEndY) {
                self.panTop = self.panEndY - self.panStartY;
                
                pageTop+= self.panTop;
                
                $(this).css({ top: pageTop });
            } else {
                // Down
                self.panTop = self.panStartY - self.panEndY;
                
                pageTop-= self.panTop;
                if (pageTop > 0) pageTop = 0;
                
                $(this).css({ top: pageTop });
            }
        }*/
    }).on('mouseup', function(e) {
        self.mouseDown = false;
    });
    
    function update() {
        if (self.mouseDown) {
            window.requestAnimationFrame(update);
        
            var pageTop = self.pageTop;
            var pageLeft = self.pageLeft;
        
            
            if (self.panStartY > self.panEndY) {
                self.panTop = self.panEndY - self.panStartY;
                
                pageTop+= self.panTop;
                
                $('div').css({ top: pageTop });
            } else {
                // Down
                self.panTop = self.panStartY - self.panEndY;
                
                pageTop-= self.panTop;
                if (pageTop > 0) pageTop = 0;
                
                $('div').css({...