How to create large scroll web page ?

Question

I will put 10.000 picture ordered like connected hexagons.But I can`t see pictures more than 140.They not fit in browser and also scroll bars not shows all elements.I want to make that on screen will be visible 100 image and if I will move mouse up,down,right or left and page will be scroll to that position.

<div calss="userList">       
        <div class="user">Photo</div>
        <div class="user">Photo</div>
        <div class="user">Photo</div>
    ...
</div>

and Main.css

body{
    position:absolute;
background:#933;    

}
div.userList {
    position:absolute;
}
.user
{
    position:absolute;  
}

Here my order.js

$(document).ready(function(){
var size = 300;
var polyXX = new Array(30,25,0 ,-25,-30,-25,0,25);
 var polyYY = new Array(0,22,30 ,22,0,-22,-30,-22);
$(".userList").css({"left":($(window).height()/2),"top":($(window).width()/2) });


var rank=1 ;
 var counter=0;
 $("id=1").css({'left':0,'top':0});
$(".userList").children().each(function(idy) {
        if(idy%8==0){
        rank++;
    }

    var positionX =rank*(polyXX[(idy+6)%8] + polyXX[(idy+7)%8]);
      var positionY =rank*(polyYY[(idy+6)%8] + polyYY[(idy+7)%8]);

      var dx = ( polyXX [ idy%8 ] + polyXX [ ( idy + 1) %8 ]);
       var dy =(polyYY [ idy%8 ] + polyYY [ ( idy + 1 ) %8 ]);

    for ( var hex = 0; hex < rank; ++hex ) {
      $(this).css({'left':( positionX+dx) ,'top':( positionY+dy),'z-index':-idy});
       positionX += dx;
      positionY += dy;
       }
   });
    $(".user").children().each(function(szy){
         size -=5;
         $(this).css({ 'width':size ,'height':size});
        }); 
});

Also I images ordered like this

Photo        Photo        Photo
  Photo      Photo       Photo
    Photo    Photo      Photo
      Photo  Photo     Photo
        Photo Photo    Photo

       Photo         Photo  
    Photo     Photo    Photo
   Photo      Photo     Photo
 Photo        Photo     Photo
Photo         Photo       Photo

What should I do to make less space between images?