Infinite scroll only working in Chrome

Question

This piece of code is creating a infinite scroll effect on my site and it works perfectly but only in the latest version of Chrome. Safari, FF & IE do not initialise the ajax call and instead use the fall back which is a Load more button.

Although it isn't working, I've created a jsFiddle that represents the markup I'm using in my Shopify collection page to hopefully give you a better idea of my setup: http://jsfiddle.net/qpka6pyv/1/ Am I doing something wrong?

FYI I'm using the doTimeout plugin to create the delay (not entirely necessary) and I'm attaching and loading more items within the scrollable div called '.st-content' not the html or body. So when you scroll to the bottom of '.st-content' load the next X amount of products. Currently this only works in Chrome.

Here's the jQuery:

function ScrollExecute() {
if($(document).height() - 350 < ($(document).scrollTop() + $(window).height())) {
   scrollNode = $('.scrollnode #more').last();    
   scrollURL = $('.scrollnode #more p a').last().attr("href");
   if(scrollNode.length > 0 && scrollNode.css('display') != 'none') {
       $.ajax({
           type: 'GET',
           url: scrollURL,
           beforeSend: function() {
               scrollNode.clone().empty().insertAfter(scrollNode).append('<img src=\"{{ "loading.gif" | asset_url }}\" />');
               scrollNode.hide();
           },
           success: function(data) {
               // remove loading feedback
               scrollNode.next().remove();
               var filteredData = $(data).find(".scrollnode");
               filteredData.insertBefore( $("#product-list-foot") );                   
           },
           dataType: "html"
       });
   }
}
}

$(document).ready(function () {
  $('.st-content').scroll(function(){
     $.doTimeout( 'scroll', 100, ScrollExecute);
  });
});

As a reference I got the code from this blog article: http://www.davecap.com/post/9675189741/infinite-scroll-for-shopify-collections

Did you debug and see what is not being called correctly? console.log is your friend. — epascarello
So did you add in console lines to see if the scroll is triggered...After that add console lines to see why the if statement is not true. — epascarello

Suchit kumar Suchit kumar · Accepted Answer · 2014-12-17T17:11:16

I think some how in chrome : ScrollExecute is not considered as function so the call is not going. try this way:It should work for all browsers.

function ScrollExecute() {
	console.log('ScrollExecute');
	//alert("hi");
	if($(document).height() - 350 < ($(document).scrollTop() + $(window).height())) {
	   scrollNode = $('.scrollnode #more').last();    
	   scrollURL = $('.scrollnode #more p a').last().attr("href");
	   if(scrollNode.length > 0 && scrollNode.css('display') != 'none') {
	       $.ajax({
	           type: 'GET',
	           url: scrollURL,
	           beforeSend: function() {
	               scrollNode.clone().empty().insertAfter(scrollNode).append('<img src=\"{{ "loading.gif" | asset_url }}\" />');
	               scrollNode.hide();
	           },
	           success: function(data) {
	               // remove loading feedback
	               scrollNode.next().remove();
	               var filteredData = $(data).find(".scrollnode");
	               filteredData.insertBefore( $("#product-list-foot") );                   
	           },
	           dataType: "html"
	       });
	   }
	}
	}

	$(document).ready(function () {
	  $('.st-content').on('scroll',function(e){
		  $.doTimeout( '.st-content', 100, ScrollExecute());// your change here
	  });
	});

 html,
body,
.st-content {
	height: 100%;
}

.st-content {
	overflow-y: scroll;
	background: #fff;
	-webkit-overflow-scrolling: touch;
}

.st-content{
	position: relative;
}

.c-4 { 
	float:left;
	width: 50%;
	position: relative;
	overflow:hidden;
}

img { width:100%; height: auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://github.com/cowboy/jquery-dotimeout/raw/master/jquery.ba-dotimeout.min.js"></script>
<div class="st-content">
    <div class="scrollnode">
	
        <div class="c-4 product">
            <img src="http://placehold.it/200x400" />
        </div>
        <div class="c-4 product">
            <img src="http://placehold.it/200x400" />
        </div>
        <div class="c-4 product">
            <img src="http://placehold.it/200x400" />
        </div>
        <div class="c-4 product">
            <img src="http://placehold.it/200x400" />
        </div>
        <div class="c-4 product">
            <img src="http://placehold.it/200x400" />
        </div>
        <div class="c-4 product">
            <img src="http://placehold.it/200x400" />
        </div>
        <div class="c-4 product">
            <img src="http://placehold.it/200x400" />
        </div>
        <div class="c-4 product">
            <img src="http://placehold.it/200x400" />
        </div>
                
        <div id="more">
            <p><a class="button" href="#">Load More</a></p>
        </div>        
        
        <div id="product-list-foot"></div>
        
    </div>
</div>

Hope it helps you.

Infinite scroll only working in Chrome

1 Answers