I'm currently working on a horizontal-scrolling site that utilizes the mousewheel jQuery Plugin. The scrolling functionality is functional, however, I am looking to implement a feature that snaps each "article" to the left side of the document when scrolling comes to a stop.
Here's the current markup:
CSS
#viewport {
width:100%;
height:100%;
overflow: hidden;
}
#stage {
height:100%;
width:400%;
position: absolute;
display:block;
overflow: hidden;
}
#stage article {
width:25%;
height:100%;
position: relative;
display:block;
float:left;
}
HTML
<div id="viewport">
<section id="stage" class="clearfix">
<article>
This block should snap to the left upon scrolling stopping.
</article>
<article>
This block should snap to the left upon scrolling stopping.
</article>
<article>
This block should snap to the left upon scrolling stopping.
</article>
<article>
This block should snap to the left upon scrolling stopping.
</article>
</section>
</div>
JQUERY
$(function() {
$("html, body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
After attempting to implement the script provided above, I did not achieve the desired results. It seems that the use of percentages may be hindering the ability to determine the previous/next location.
Thank you for any assistance in advance.