javascript - jQuery自动上下滚动div

我写了一个fiddle，它会自动在div上下滚动，效果很好。但是向下滚动时会出现问题，它不显示最后一行(在这种情况下为“String4”)。有人可以帮我解决这个问题吗？

<div class="container">
<div class="content">
    <p>string1</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string0</p>
    <p>string1</p>
    <p>string2</p>
    <p>string3</p>
    <p>string4</p>
     <p> </p>
</div>

和js的东西:

   $(document).ready(function() {

    if ($('.content').height() > $('.container').height()) {
        setInterval(function () {

            start();
       }, 3000);

    }
});

function animateContent(direction) {
    var animationOffset = $('.container').height() - $('.content').height();
    if (direction == 'up') {
        animationOffset = 0;
    }

    console.log("animationOffset:"+animationOffset);
    $('.content').animate({ "marginTop": (animationOffset)+ "px" }, 5000);
}

function up(){
    animateContent("up")
}
function down(){
    animateContent("down")
}

function start(){
 setTimeout(function () {
    down();
}, 2000);
 setTimeout(function () {
    up();
}, 2000);
   setTimeout(function () {
    console.log("wait...");
}, 5000);
}

最佳答案

这是一个很好的解决方案

仅在这里检查

$(document).ready(function() {

    if ($('.content').height() > $('.container').height()) {
        setInterval(function () {

            start();
       }, 3000);

    }
});

function animateContent(direction) {
    var animationOffset = $('.container').height() - $('.content').height()-30;
    if (direction == 'up') {
        animationOffset = 0;
    }

    console.log("animationOffset:"+animationOffset);
    $('.content').animate({ "marginTop": (animationOffset)+ "px" }, 5000);
}

function up(){
    animateContent("up")
}
function down(){
    animateContent("down")
}

function start(){
 setTimeout(function () {
    down();
}, 2000);
 setTimeout(function () {
    up();
}, 2000);
   setTimeout(function () {
    console.log("wait...");
}, 5000);
}    

.container { height:250px; background:red; padding:0 10px; overflow:hidden; }
.content { background:#eee; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <div class="content">
        <p>string1</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string0</p>
        <p>string1</p>
        <p>string2</p>
        <p>string3</p>
        <p>string4</p>
    </div>
</div>

制作

var animationOffset = $('.container').height() - $('.content').height()-30;

可能会因为填充而中断您的高度。

我已经删除了您的空p标签。

这是Fiddle

关于javascript - jQuery自动上下滚动div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29714096/