If im getting it correctly, you want to snap every 3rd item in the iscroll window.
I can't think of any elegant way to do this ( not sure if there is an option that allows to set number of elements to ignore before snapping )
But you could ( depending on how flexible you are with modifying the markup a bit ) move those three elements as child of every "li".
Heres the link to js fiddle ( http://jsfiddle.net/QFz3L/1/ )
HTML/CSS/JS below.
There isnt much difference in CSS and JS, Just some alterations to HTML
HTML:
<div class="span8 marginleft mid-menu-panel" id="headerWrapper">
<ul id="scroller">
<li class="menu">
<div>block 1</div>
<div class="cf">
<div class="span3">
item 1
</div>
<div class="span3">
item 2
</div>
<div class="span3">
item 3
</div>
</div>
</li>
<li class="menu">
<div>block 2</div>
<div class="cf">
<div class="span3">
item 4
</div>
<div class="span3">
item 5
</div>
<div class="span3">
item 6
</div>
</div>
</li>
<li class="menu">
<div>block 3</div>
<div class="cf">
<div class="span3">
item 7
</div>
<div class="span3">
item 8
</div>
<div class="span3">
item 9
</div>
</div>
</li>
</ul>
</div>
CSS:
.cf {
overflow:hidden;
}
.span3 {
float:left;
height:100px;
background:green;
width:210px;
}
.span8{
position: absolute;
width:630px;
height:100px;
}
.menu{
float:left;
width:630px; /* same as parent( .span8 ) to make sure only 1 .menu is visible ofc */
height:100px;
background-color:red;
}
#scroller{
width:1890px; /* total width of children, 630 * 3 */
overflow:hidden;
list-style:none;
padding:0;
margin:0;
}
JS:
myScroll = new iScroll('headerWrapper',{
snap: 'li',
hScrollbar: false,
vScrollbar: false ,
momentum: true,
vScroll: false
});
Hope that helps.
Cheers Varinder