无限滚动仅适用于 Chrome

Question

这段代码在我的网站上创建了无限滚动效果，它可以完美运行，但只能在最新版本的 Chrome 中运行。 Safari、FF 和 IE 不会初始化 ajax 调用，而是使用作为加载更多按钮的回退。

虽然它不起作用，但我创建了一个 jsFiddle，它代表我在 Shopify 集合页面中使用的标记，希望能让您更好地了解我的设置：http://jsfiddle.net/qpka6pyv/1/ 我做错了什么吗？

仅供参考，我正在使用 doTimeout plugin 来创建延迟（并非完全必要），并且我在名为“.st-content”的可滚动 div 中附加和加载更多项目，而不是 html 或正文。因此，当您滚动到“.st-content”的底部时，加载下一个 X 数量的产品。目前这仅适用于 Chrome。

这是 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);
  });
});

作为参考，我从这篇博客文章中获得了代码：http://www.davecap.com/post/9675189741/infinite-scroll-for-shopify-collections

Answer 1

我认为 chrome 中的一些方法：ScrollExecute 不被视为函数，因此调用不会进行。试试这个方法：它应该适用于所有浏览器。

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>

希望对你有帮助。