Javascript jQuery 自动上下滚动一个 div

jQuery auto scroll a div Up & down

提问by Nomesh DeSilva

I have written a fiddlethat scrolls a div up and down automatically which is working fine. But there is an issue when it scrolls down, it doesn't show the last row ("String4" in this case). can anybody help me to sort this out please.

我写了一个自动上下滚动 div的小提琴，效果很好。但是向下滚动时出现问题，它不显示最后一行（在这种情况下为“String4”）。任何人都可以帮我解决这个问题。

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

and js stuff:

和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);
} 

采纳答案by nirmal

Here is good solution

这是很好的解决方案

check here only

只在这里检查

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

as may be padding interrupts your height.

因为填充可能会干扰您的身高。

I have removed your empty p tag.

我已经删除了你的空 p 标签。

here is the Fiddle

这是小提琴

回答by Sumeet Gavhale

Try This: Might be stupid but does the work:

试试这个： 可能很愚蠢，但确实有效：

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

Here is the updated fiddle: http://jsfiddle.net/f7e3d440/9/

这是更新的小提琴：http: //jsfiddle.net/f7e3d440/9/

回答by Sanjeev Kumar

Try to put the following code:

尝试放置以下代码：

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

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

Div 溢出滚动到底部：有可能吗？

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

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