jquery - Panning on huge div -

my plan have big div (4000px x 4000px) , inside smaller divs phrases random positioned big div. user see of course portion of @ time. when moving mouse example on right side of browser window view pan right on big div. , of course when moving mouse lower part of browser window pan down , upper right corner pan upper right corner of div.

on mobile (less 600px) smaller divs should stacked on top of each other , use can scroll up/downd traditionally.

now question should done canvas or possible html & jquery somehow? or know if there jquery lib have functionality this?

what can solving in canvas show smaller area in code, objects can appear everywhere, or keep within borders of 4000x4000 if want.

you'll use 2 variables: offsetx , offsety, change when mouse tracks towards edge of canvas (left, right, or down). when paint things, you'll paint them x- , y- coordinates have assigned them, minus offset-variables.

se working example below.

note, save cpu, perform check see if object you're paint visible in current viewing window, if not, don't draw it.

var c = document.getelementbyid("canvas");  var ctx = c.getcontext("2d");    c.height = 300;  c.width = 500;    var offsetx = 0;  var offsety = 0;  var movingleft = false;  var movingright = false;  var movingdown = false;  var movingup = false;       //mouse event see going on.  c.addeventlistener("mousemove",move);    function move(event) {      event = event || window.event;      x = event.pagex - c.offsetleft,      y = event.pagey - c.offsettop;      //stop movement      movingleft = false;      movingright = false;      movingdown = false;      movingup = false;            //check see if mouse in area change offset      if (x>c.width-50) {          movingleft = true;      }      if (x<50) {          movingright = true;         }      if (y<50) {          movingup = true;         }      if (y>c.height-50) {          movingdown = true;         }  }    function updatedraw() {      //draw arrow indicating current x      ctx.clearrect(0,0,c.width,c.height);      ctx.beginpath();      ctx.moveto(c.width/2-10,0);      ctx.lineto(c.width/2+10,0);      ctx.lineto(c.width/2,10);      ctx.closepath();      ctx.stroke();      ctx.textalign="center";      var displayx = c.width/2+offsetx;      ctx.filltext("x: "+displayx,c.width/2,20);        //draw arrow indicating current y      ctx.moveto(0,c.height/2-10);      ctx.lineto(0,c.height/2+10);      ctx.lineto(10,c.height/2);      ctx.closepath();      ctx.stroke();      ctx.textalign="left";      var displayy = c.height/2+offsety;      ctx.filltext("y: "+displayy,13,c.height/2+3);            //add ball , rectangle have visual of field of vision moving      ctx.beginpath();      ctx.arc(c.width/2-offsetx,c.height/2-offsety,30,0,2*math.pi);      ctx.closepath();      ctx.fill();      ctx.fillrect(c.width/2+100-offsetx,150-offsety,50,100);                  //update offsets depending on mouse position.      if (movingleft) {offsetx++;}      if (movingright) {offsetx--;}      if (movingdown) {offsety++;}      if (movingup) {offsety--;}                  requestanimationframe(updatedraw);  }    //starting whole thing  updatedraw();

canvas {      border: 1px solid black;  }

<canvas id="canvas"></canvas>