deslocamento automático do jQuery para cima e para baixo

escrevi um violino que desloca um div para cima e para baixo automaticamente, o que está a funcionar bem. Mas há um problema quando ele se desloca para baixo, ele não mostra a última linha ("String4" neste caso). alguém me pode ajudar a resolver isto, por favor?

<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>

e coisas do 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);
}
Author: Vaibhav Mule, 2015-04-18
Source

4 answers

Aqui está uma boa solução.

Verifique aqui apenas 

$(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>

Make 

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

Como pode ser enchimento interrompe a sua altura.

Removi a tua etiqueta p vazia.

Aqui está o violino.
 4
Author: nirmal, 2015-04-18 07:29:53
Tenta isto: pode ser estúpido,mas faz o trabalho: 
<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><br> </p>
    </div>
</div>

Aqui está o violino actualizado: http://jsfiddle.net/f7e3d440/9/

 2
Author: Sumeet Gavhale, 2015-04-18 07:11:10

Tente colocar o seguinte código: 

var myDiv = document.getElementById('content');
myDiv.scrollTop = myDiv.scrollHeight;

Div Overflow Scroll-to-bottom: é possível?

Http://www.codeproject.com/Questions/632251/How-to-make-div-scroll-to-bottom-on-load

 0
Author: Sanjeev Kumar, 2017-05-23 11:46:08
Este violino funciona muito bem para conteúdos gerados dinamicamente. https://jsfiddle.net/bsxcL71L/2/ 
function down() {
$('html, body').animate({ scrollTop: hg}, 20000);
up();
};
function up() {
$('html, body').animate({ scrollTop: $('#start').offset().top }, 20000);
down();
};
$(document).ready(function () {
hg = $('#content').height() - 420;
down();
});
 0
Author: Nick Kester, 2020-12-23 13:35:42