jQuery tự động cuộn một div Lên và xuống

Question

Tôi đã viết fiddle để cuộn một div lên xuống tự động đang hoạt động tốt. Nhưng có một vấn đề khi nó cuộn xuống, nó không hiển thị hàng cuối cùng ("String4" trong trường hợp này). bất cứ ai có thể giúp tôi để sắp xếp này ra xin vui lòng.

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

và js thứ:

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

Đây là giải pháp tốt

kiểm tra ở đây chỉ

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

làm

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

như có thể đệm ngắt chiều cao của bạn.

Tôi đã xóa thẻ p trống của bạn.

đây là Fiddle

Answer 2

Hãy thử này: Có thể là ngu ngốc nhưng không công việc:

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

Đây là fiddle Cập nhật: http://jsfiddle.net/f7e3d440/9/

Answer 3

Cố gắng đặt đoạn mã sau:

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