无限滚动仅在Chrome中工作

Infinite scroll only working in Chrome

本文关键字：工作 Chrome 滚动无限更新时间：2023-09-26

这段代码在我的网站上创建了无限滚动效果，它运行良好，但仅在最新版本的 Chrome 中运行。Safari，FF和IE不初始化ajax调用，而是使用回退，这是一个加载更多按钮。

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

仅供参考，我正在使用 doTimeout 插件来创建延迟（并非完全必要），并且我在名为".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

我认为在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>

希望对您有所帮助。