自動滾動和循環內容 DIV

Question

我發現這個腳本可以完美地啟用自動滾動和循環。 但我希望這發生在固定高度的 div 中。 當我更改 CSS 中的.inner &.outer 以固定高度時，循環僅運行（看起來像兩次）然后跳轉並再次開始。 第一個片段是工作片段，第二個片段的固定高度為 200px。

 function autoScrollDown(){ $(".inner").css({top:-$(".outer").outerHeight()}) // jump back.animate({top:0},5000,"linear", autoScrollDown); // and animate } function autoScrollUp(){ $(".inner").css({top:0}) // jump back.animate({top:-$(".outer").outerHeight()},5000,"linear", autoScrollUp); // and animate } // fix hight of outer: $('.outer').css({maxHeight: $('.inner').height()}); // duplicate content of inner: $('.inner').html($('.inner').html() + $('.inner').html()); autoScrollUp();

 *{ margin:0; padding:0; }.inner{ position:relative; top:0px; }.outer{ overflow:hidden; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="outer"> <div class="inner"> <h3>Scrolling down... line 1</h3> <h3>Scrolling down... line 2</h3> <h3> Scrolling down... line 3 </h3> <h3> Scrolling down... line 4 </h3> <h3> Scrolling down... line 5 </h3> <h3> Scrolling down... line 6 </h3> <h3> Scrolling down... line 7 </h3> <h3> Scrolling down... line 8 </h3> <h3> Scrolling down... line 9 </h3> <h3> Scrolling down... line 10 </h3> <h3> Scrolling down... line 11 </h3> <h3> Scrolling down... line 12</h3> <h3> Scrolling down... line 13</h3> <h3> Scrolling down... line 14</h3> <h3> Scrolling down... line 15 </h3> </div>

 function autoScrollDown(){ $(".inner").css({top:-$(".outer").outerHeight()}) // jump back.animate({top:0},5000,"linear", autoScrollDown); // and animate } function autoScrollUp(){ $(".inner").css({top:0}) // jump back.animate({top:-$(".outer").outerHeight()},5000,"linear", autoScrollUp); // and animate } // fix hight of outer: $('.outer').css({maxHeight: $('.inner').height()}); // duplicate content of inner: $('.inner').html($('.inner').html() + $('.inner').html()); autoScrollUp();

 *{ margin:0; padding:0; }.inner{ height:200px; position:relative; top:0px; }.outer{ height:200px; overflow:hidden; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="outer"> <div class="inner"> <h3>Scrolling down... line 1</h3> <h3>Scrolling down... line 2</h3> <h3> Scrolling down... line 3 </h3> <h3> Scrolling down... line 4 </h3> <h3> Scrolling down... line 5 </h3> <h3> Scrolling down... line 6 </h3> <h3> Scrolling down... line 7 </h3> <h3> Scrolling down... line 8 </h3> <h3> Scrolling down... line 9 </h3> <h3> Scrolling down... line 10 </h3> <h3> Scrolling down... line 11 </h3> <h3> Scrolling down... line 12</h3> <h3> Scrolling down... line 13</h3> <h3> Scrolling down... line 14</h3> <h3> Scrolling down... line 15 </h3> </div> </div>

Answer 1

您必須計算隱藏部分的總高度。

function autoScrollUp(){
    $(".inner").css({top:0}) // jump back
               .animate({top:calcHeight}, 5000,"linear", autoScrollUp); // and animate
}

// fix hight of outer:
$('.outer').css({maxHeight: $('.inner').height()});
// duplicate content of inner:
$('.inner').html($('.inner').html() + $('.inner').html());
// total height / 2
var calcHeight = ( $(".outer")[0].scrollHeight / 2 ) * -1
autoScrollUp();

問候