Edit in JSFiddle

$("body").onLoad=initPage();

function hasTouch() {
    return (('ontouchstart' in window) ||       // html5 browsers
            (navigator.maxTouchPoints > 0) ||   // future IE
            (navigator.msMaxTouchPoints > 0));  // current IE10
}
function initPage()
{
 str="";
 for(i=0;i<10;i++) // change amount of icons here
 {
   str+="<div class='icon' id='ic"+i+"'>put icon in here</div>";
 }
 
 $("#cont").html(str).width(3+52*i+"px"); // 40+margin+ border, I need the 3 because sometimes browsers round off wrong when in an iframe
 var scrollbar_extra=0;
  if(!hasTouch()) scrollbar_extra=16;
 $("#ct").height($("#cont").height()+8+scrollbar_extra); // border of 4 + scrollbar if you are NOT on an ipad!
 $(".icon").click(mdwnIcon);
}

function mdwnIcon()
{
  alert("you pressed "+$(this).attr("id"));
}

<div id="ct"><div id="cont">
</div></div>
You can scroll the icons on an iPad and touch them. I wrote this on my iPad. (gotta love jsfiddle)

#ct{
width: 300px;
height: 100px;
overflow: scroll;
Overflow-y: hidden;
Ms-overflow-y: hidden;
Border: solid 4px #0f0;
}
.icon{
display: inline-block;
width: 40px;
height: 40px;
background-color: #0cf;
Border: solid 1px #0ff;
margin: 5px;
Overflow: hidden;
}
.icon:hover { background-color: #ffff00; }    

#cont{
border: solid 4px #f00;
width: 400px;
}