jQuery auto scroll a div Up & down

Question

Ho scritto un fiddle che scorre automaticamente un div su e giù che funziona perfettamente. Ma c'è un problema quando scorre verso il basso, non mostra l'ultima riga ("String4" in questo caso). qualcuno può aiutarmi a risolvere questo per favore.

<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 js roba:

$(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); 
} 

Answer 1

Ecco buona soluzione

controllo qui solo

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

fanno

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

come può essere imbottitura interrompe la tua altezza.

Ho rimosso il tag p vuoto.

Ecco l'Fiddle

Answer 2

Try This: Potrebbe essere stupido, ma fa il lavoro:

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

Ecco il violino aggiornamento: http://jsfiddle.net/f7e3d440/9/

Answer 3

Prova a mettere il seguente codice:

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

Div Overflow Scroll-to-bottom: Is it possible?

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