jQuery auto przewijanie div Up & down

Question

Napisałem fiddle, który automatycznie przewija div, co działa poprawnie. Ale pojawia się problem, gdy przewija się w dół, nie pokazuje ostatniego wiersza ("String4" w tym przypadku). Czy ktoś może mi pomóc to rozwiązać?

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

i js rzeczy:

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

Oto dobre rozwiązanie

sprawdzić tutaj tylko

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

zrobić

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

jakie mogą być wyściółka przerywa swoją wysokość.

Usunąłem pusty tag p.

oto Fiddle

Answer 2

Spróbuj to: Może być głupie, ale działa:

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

Oto aktualizowane skrzypce: http://jsfiddle.net/f7e3d440/9/

Answer 3

spróbować umieścić następujący kod:

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