jQuery otomatik kaydırma a div Yukarı ve aşağı

Question

Otomatik olarak iyi çalışan bir yukarı ve aşağı kaydırır, bir fiddle yazdım. Ancak, aşağı kaydırıldığında bir sorun var, bu durumda son satırı göstermiyor ("String4"). Bunu düzeltmeme yardım eden var mı lütfen?

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

ve js şeyler: aptal olabilirdi ama çalışır:

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

Burada sadece

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

dolgu boyunuzu keser olabilecek

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

yapmak iyi bir çözüm burada

kontroldür.

Boş p etiketinizi kaldırdım.

burada aşağıdaki kodu koymak için Fiddle

Answer 2

Bu deneyin İşte

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

güncellenmiş keman olduğunu: http://jsfiddle.net/f7e3d440/9/

Answer 3

deneyin şudur: Bu biraz kurnaz çözüm, teşekkür bro olsa çalışıyor

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