jQuery自动上下滚动一个div答案

【问题标题】：jQuery auto scroll a div Up & downjQuery自动上下滚动一个div
【发布时间】：2015-04-18 07:02:50
【问题描述】：

我写了一个fiddle，它可以自动上下滚动一个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>

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

【问题讨论】：

标签： javascript jquery html autoscroll

【解决方案1】：

这是一个很好的解决方案

只检查这里

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

制作

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

因为填充可能会影响您的身高。

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

这里是Fiddle

【讨论】：

不，它仅在您将
作为接受的答案附加时才有效。从小提琴中删除
并尝试使用您的代码，它不起作用。感谢您的尝试。
还是老样子
你可以在这里查看代码。而您标记为正确的答案。你看不到你的边框底部。我认为这不是一件好事。否则选择哪个是您的选择。
它现在就像一个魅力！和一个很好的清洁解决方案。谢谢尼尔马尔。

【解决方案2】：

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

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

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

【讨论】：

再次感谢..非常感谢！

【解决方案3】：

尝试输入以下代码：

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

【讨论】：

【解决方案4】：

这个小提琴非常适合动态生成的内容。 https://jsfiddle.net/bsxcL71L/2/

function down() {
$('html, body').animate({ scrollTop: hg}, 20000);
up();
};
function up() {
$('html, body').animate({ scrollTop: $('#start').offset().top }, 20000);
down();
};
$(document).ready(function () {
hg = $('#content').height() - 420;
down();
});

【讨论】：