jQuery自动滚动一个div Up&下 [英] jQuery auto scroll a div Up & down

问题描述

我已经写了一个小提琴，它可以自动上下滚动，工作正常。但是当它向下滚动时存在问题，它不显示最后一行（在这种情况下为String4）。

 < div class =container>有人可以帮我解决这个问题。 
< div class =content> 
< p> string1< / p> 
< p>字符串< / p> 
< p>字符串< / p> 
< p>字符串< / p> 
< p>字符串< / p> 
< p>字符串< / p> 
< p> string0< / p> 
< p> string1< / p> 
< p> string2< / p> 
< p> string3< / p> 
< p> string4< / p> 
< p> < / p为H. 
< / div> 
  

和js stuff：


$ $ $ .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）; （）{
animateContent（down）



函数up（）{
animateContent ）
}

function start（）{
setTimeout（function（）{
down（）;
}，2000）;
setTimeout（function（）{
up（）;
}，2000）;
setTimeout（function（）{
console.log（wait ...）;
}，5000）;

解决方案

p>

仅限于此处

< $（'。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;背景：红色;填充：0 10px;溢出：隐藏; } .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为H.字符串1< / p为H. < p为H.串LT; / p为H. < p为H.串LT; / p为H. < p为H.串LT; / p为H. < p为H.串LT; / p为H. < p为H.串LT; / p为H. < p为H. string0< / p为H. < p为H.字符串1< / p为H. < p为H.字符串2< / p为H. < p为H. STRING3< / p为H. < p为H.串，4< / p为H. < / div>< / div>  

p>



  var animationOffset = $（'。container'）。height（） -  $（'。content'）。height（） -  30 ; 
  

可能会填充中断您的身高。

这里是小提琴

I have written a fiddle that 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 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:

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

解决方案

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.

here is the Fiddle

这篇关于jQuery自动滚动一个div Up&amp;下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！