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

这将解决问题。

用于滚动帖子的jQuery自调用函数迭代

2 个答案: