Бесконечный прокрутка работает только в Chrome

Question

Этот фрагмент кода создает бесконечный эффект прокрутки на моем сайте, и он отлично работает, но только в последней версии Chrome. Safari, FF & IE не инициализирует вызов ajax и вместо этого использует откат, который является кнопкой «Загрузить больше».

Хотя он не работает, я создал jsFiddle, который представляет собой разметку, которую я использую на моей странице коллекции Shopify, чтобы надеяться дать вам лучшее представление о моей настройке: http://jsfiddle.net/qpka6pyv/1/ Я делаю что-то неправильно?

FYI Я использую doTimeout plugin для создания задержки (не обязательно), и я прикрепляю и загружаю больше элементов внутри прокручиваемого div, называемого «.st-content», а не html или body. Поэтому, когда вы переходите к нижней части «.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

Я думаю, что некоторые, как в хроме: ScrollExecute не рассматривается как функция, так что вызов не собирается. попробуйте этот способ: он должен работать для всех браузеров.

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

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

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

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

 
.st-content{ 
 
\t position: relative; 
 
} 
 

 
.c-4 { 
 
\t float:left; 
 
\t width: 50%; 
 
\t position: relative; 
 
\t 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"> 
 
\t 
 
     <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>

Надеется, что это помогает.