Question

这段代码在我的网站上创建了一个无限滚动效果，它完美无缺，但仅限于最新版本的Chrome。 Safari，FF＆amp; IE不会初始化ajax调用，而是使用后退，这是一个加载更多按钮。

虽然它不起作用，但我已经创建了一个jsFiddle来代表我在Shopify集合页面中使用的标记，希望能让您更好地了解我的设置：{{3}我做错了什么？

仅供参考我使用http://jsfiddle.net/qpka6pyv/1/创建延迟（并非完全必要），并且我在可滚动的div中添加和加载更多项目，名为＆＃39; .st-content＆＃ 39;不是HTML或身体。所以当你滚动到＆＃39; .st-content＆＃39;的底部时加载下一个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);
  });
});

作为参考，我从这篇博客文章中获得了代码：doTimeout plugin

Answer 1

我认为Chrome中的某些内容：ScrollExecute不被视为功能，因此呼叫不会发生。试试这种方式：它适用于所有浏览器。

＆＃13;

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

＆＃13;

 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; }

＆＃13;

<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>

＆＃13;

希望它对你有所帮助。

无限滚动仅适用于Chrome

1 个答案: