A simple scroll

Markup

    <div id='scrollz1' style="height: 400px; padding: 0px 15px;">
        <p>Scroll to see other pictures</p>
        <p>
            <img src="http://distilleryimage7.s3.amazonaws.com/8114892a1fff11e19896123138142014_6.jpg"/>
        </p>
        <p>
            <img src="http://distillery.s3.amazonaws.com/media/2011/10/05/9302b8e1f5ee40ddaff9dec24f9a77f5_6.jpg"/>
        </p>
        <p>
            <img src="http://distillery.s3.amazonaws.com/media/2011/09/23/e21e8552138146ac945876dbcb043ecc_6.jpg"/>
        </p>
        <p>
            <img src="http://distillery.s3.amazonaws.com/media/2011/08/24/4768d409cf944eb3932aae917070932e_6.jpg"/>
        </p>
        <p>End of content</p>
    </div>
    

Before calling .scrollz() remember to always give a height to the content.

Code

        $('#scrollz1').scrollz();
        
        // Disable image dragging in content
        $('#scrollz1').find('img').bind('mousedown', function(event) {
            event.preventDefault();
        });
    

Result

Scroll to see other pictures

End of content

An infinite scroll with pull to refresh

Markup

    <div id='scrollz2' style="height: 346px; padding: 0px 10px">
        <ul></ul>
    </div>
    

Code

        // Scroll with pull support
        $('#scrollz2').scrollz({
                pull : true
            });
            
        // Bind events
        $('#scrollz2').bind('bottomreached', function() {
            // Load more
            loadMore();
        });
        
        $('#scrollz2').bind('pulled', function() {
             // Reset page index
            nextPageIndex = 0;
            
            // Reload
            loadMore();
        });
            
        // Load more function : used to load AJAX content (uses Twitter JSONP)
        var nextPageIndex = 0;
        var loading = false;

        function loadMore() {
				
				if (!loading) {
				
					loading = true;
                    
                    url = 'http://zippy1978.tumblr.com/rss';
                    protocol = document.location.protocol == 'file:' ? 'http:' : document.location.protocol;
                    $.ajax({
                    type: "GET",
                    url: protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1000&callback=?&q=' + encodeURIComponent(url),
                    dataType: 'json',
                    error: function(){
                        loading = false;
                    },
                    success: function(xml){
                        
                        var targetList = $('#scrollz2 ul');
                        
                        values = xml.responseData.feed.entries;
                        
                        // First page
						if (nextPageIndex == 0) {
							targetList.empty();
						}

						$.each(values, function() {
                            targetList.append('<li>' + this.contentSnippet + '</li>');
						});

						// Hide pull header after first page is loaded
						if (nextPageIndex == 0) {
							$('#scrollz2').scrollz('hidePullHeader');
						}
                        
                        nextPageIndex++;
                        loading = false;
                    }
                });
			
                }
				
        }

    

Result