用於滾動文章的jQuery自調用函數迭代

Question

我試圖創建一個後滾動器，上下移動容器以顯示下一篇文章。移動的類型（用動畫完成）取決於諸如下一篇文章是否是最後一篇文章以及文章大小是否大於查看容器等因素。

我以前使用了函數的setInterval，但發現我無法修改依賴於提及的變量的間隔時間。

相反，我選擇了函數迭代中的函數，這應該允許更多的靈活性。但它不起作用！我有一個完全註釋JSFiddle。

除了把代碼在這裏：

jQuery(document).ready(function ($) { 
 
    // An array of HTML elements with the class '.scrNote' (scrolling note) 
 
    var postArr = $('.scrNote'); 
 
    // nextSec prepares the script on how to prepare 
 
    var nextSec = 0; 
 
    // Not sure if this is necessary, but tells us the starting position 
 
    var currPos = $('.postContainer').offset().top; 
 
    // topSpace tells the script how far to scroll 
 
    var topSpace = currPos + $(postArr[nextSec]).outerHeight(true); 
 

 
    function scrollPosts() { 
 
     nextSec++; 
 
     if (nextSec >= postArr.length) { 
 
      // A reset takes place, bring the posts back to the top 
 
      $('.widgPost').scroll(); 
 
      $('.widgPost').animate({ 
 
       scrollTop: 0 
 
      }, 2000); 
 
      nextSec = 0; 
 
      topSpace = currPos + $(postArr[nextSec]).outerHeight(true); 
 
      // A 4s delay takes place, before the function repeats (calling itself) 
 
      setTimeout(scrollPosts, 4000); 
 
     } else if (postArr[(nextSec - 1)].height() > $('widgPost').height) { 
 
      // A slow scroll takes place when the post is larger than the widget 
 
      $('.widgPost').scroll(); 
 
      $('.widgPost').animate({ 
 
       scrollTop: topSpace 
 
      }, 10000); 
 
      topSpace = currPos + $(postArr[nextSec]).outerHeight(true); 
 
      // The function begins again as normal, without a delay 
 
      scrollPosts(); 
 
     } else { 
 
      // A regular scroll takes place 
 
      $('.widgPost').scroll(); 
 
      $('.widgPost').animate({ 
 
       scrollTop: topSpace 
 
      }, 3000); 
 
      topSpace = currPos + $(postArr[nextSec]).outerHeight(true); 
 
      // A 4s delay takes place, before the function repeats (calling itself) 
 
      setTimeout(scrollPosts, 4000); 
 
     } 
 
    } 
 

 
    // The function should be called here 
 
    scrollPosts(); 
 

 
});

.widgPost h1, h2, h3 { 
 
    margin: 0; 
 
} 
 
.widgPost { 
 
    width: 100%; 
 
    height: 150px; 
 
    position: relative; 
 
    overflow-y: hidden; 
 
} 
 
.postContainer { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.scrNote { 
 
    width: 100%; 
 
    min-height: 100px; 
 
    background: yellow; 
 
    position: relative; 
 
    display:block; 
 
    margin: 0 0 16px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="widgPost"> 
 
    <div class="postContainer"> 
 
     <div class="scrNote"> 
 
      <h1>Hello!</h1> 
 
Hello here is some text</div> 
 
     <div class="scrNote"> 
 
      <h1>Next post!</h1> 
 
Hello here is some more text...</div> 
 
     <div class="scrNote"> 
 
      <h1>Next new post!</h1> 
 
Hello here is some more text...</div> 
 
    </div> 
 
</div>

感謝您的幫助！

Answer 1

控制檯顯示了一些錯誤...主要是，你失蹤（）之後的一個高度函數。

jQuery(document).ready(function ($) { 


    function scrollPosts() { 
     //Some intial setup 
     var postArr = $('.scrNote'); 
     var nextSec = 0; 
     var isPaused = false; 
     var currPos = $('.postContainer').position().top; 
     var topSpace = currPos + $(postArr[nextSec]).outerHeight(true); 



     nextSec++; 
     if (nextSec >= postArr.length) { 
      $('.widgPost').scroll(); 
      $('.widgPost').animate({ 
       scrollTop: 0 
      }, 2000); 
      nextSec = 0; 
      topSpace = currPos + $(postArr[nextSec]).outerHeight(true); 
      setTimeout(scrollPosts, 4000); 
     } else if (postArr[(nextSec - 1)].height > $('widgPost').height) { 
      $('.widgPost').scroll(); 
      $('.widgPost').animate({ 
       scrollTop: topSpace 
      }, 10000); 
      topSpace = currPos + $(postArr[nextSec]).outerHeight(true); 
     } else { 
      console.log(nextSec); 
      $('.widgPost').scroll(); 
      $('.widgPost').animate({ 
       scrollTop: topSpace 
      }, 3000); 
      topSpace = currPos + $(postArr[nextSec]).outerHeight(true); 
      setTimeout(scrollPosts, 4000); 
     } 
    }; 

    scrollPosts(); 

}); 

這裏有一個滾動小提琴： https://jsfiddle.net/jackweath/b7vtrwpc/1/

我不知道如果這就是你想要完全的行爲，但至少在功能正在運行。你應該可以從那裏拿走它。

Answer 2

您曾與下面的線路問題：

else if (postArr[(nextSec - 1)].height() > $('widgPost').height) 

你越來越錯誤height()不是一個函數除非你換你postArr與$這是顯而易見的。因此，如果您將postArr包裝在$的內部，那麼您肯定可以使用height()，因爲height()是jquery的功能。

else if ($(postArr[(nextSec - 1)]).height() > $('widgPost').height) 

DEMO

或者只是將其刪除，並把它作爲後者

else if (postArr[(nextSec - 1)].height > $('widgPost').height) 

DEMO

這將解決這個問題。