scrollThis

container.sass

#container{
	margin-left:15px;
	margin-top:8px;
	width:243px;
	height:344px;
	overflow:hidden;
	.content{ 
		padding:0;
		border:0;
		margin:0;
		.instagram_photo{
			width:108px;
			height:108px;
			border:5px solid $white;
			display:inline-block;
			vertical-align:top;
			margin:3px 2px;
			@include border-radius(3px);
			@include box-shadow(0 0 2px $grey);
			img{
				width:98px;
				height:98px;
			}
		}
	}
}

scrolledContent.html

<div id="container">
    <div class="content" id="move_this">
        {foreach $instagram as $image}
	   <div class="instagram_photo" alt="{$image.caption}">
	     <a href="{$image.remote}" target="blank"><img src="{$image.local}"  width="98" height="98"></a>
	   </div>
	{/foreach}
    </div>
</div>


<script>

   scrollThis($('#container'));

</script>

scrollThis.js

var scrollThis = function(cont){
	cont.on('hover',function(){
		var move_this = cont.children();
		var height = move_this.outerHeight();
		var cont_height = cont.innerHeight();
		var delta_d = move_this.position().top;
		var max_scroll = (height - cont_height)*(-1);
		$(this).on('mousewheel', function(e,d){
			if (d > 1){
				d = 1;
			}
			delta_d = delta_d + d*10;
			if (delta_d < max_scroll){
				delta_d = max_scroll;
				move_this.css({
					"top": delta_d + 'px',
				});
			} else if (delta_d > 0){
				delta_d = 0
				move_this.css({
					"top": delta_d + 'px',
				});
			}
			move_this.css({
				'top': delta_d + "px",
			},0); 
			e.preventDefault();
		});
		return false;
	});
}

This is an anonymous function that allows you to scroll a div, or other element without the native scrollbar from showing up. Straight jQuery and Css manipulation.