divを通じた無限スクロール

Question

私は今日どのミーティングがあるのか​​、どの部屋にいるのかを示す項目があります。

今の私は、この経由して、それを示しています。

<div class="panel panel-primary"> 
    <div id="room_content"> 
     <?php 
      $url = "Urlname :)"; 
      $content = file_get_contents($url); 
      $json = json_decode($content); 

      foreach($json->rooms as $room) 
      { 
       echo '<p><div class="rooms">' . $room->name . '</div></p>'; 
//Kijk of er afspraken voor die kamer zijn. 
       $a = count($room->meetings); 
       if ($a == 0){ 
        echo "<div class='no_meeting'><u><p>No meetings planned in this room</p></u><br /></div>"; 
       } 
//Laat zien wat voor afspraken er zijn 
       foreach($room->meetings as $meeting) 
       { 
        $start = $meeting->start; 
        $start_time = DateTime::createFromFormat('Y-m-d\TH:i:s.uP', $start, new DateTimeZone('UTC')); 
        $end = $meeting->end; 
        $end_time = DateTime::createFromFormat('Y-m-d\TH:i:s.uP', $end, new DateTimeZone('UTC')); 
        $duration = $meeting->duration; 
        $duration_time = DateTime::createFromFormat('H:i:s', $duration, new DateTimeZone('UTC')); 

        echo '<div class="meeting"><u><p><b>' . $meeting->subject . '</b></p></u>'; 
         echo '<p><b>Organizor:</b> ' . $meeting->organizer . '</p>'; 
         echo '<p><b>Start:</b> ' . $start_time->format('H:i') . '</p>'; 
         echo '<p><b>End:</b> ' . $end_time->format('H:i') . '</p>'; 
         echo '<p><b>Duration:</b> ' . $duration_time->format('H:i') . '</p><br /></div>';   
       } 
      } 
     ?> 
    </div> 
</div> 

は今、これは私に必要なデータを示しています。

現在、必要に応じて自動的に上下にスクロールします。これはjavascriptを介して行われます。

<script language="javascript"> 
    ScrollRate = 50; 

    function scrollDiv_init() { 
     DivElmnt = document.getElementById("room_content"); 
     ReachedMaxScroll = false; 

     DivElmnt.scrollTop = 0; 
     PreviousScrollTop = 0; 

     ScrollInterval = setInterval('scrollDiv()', ScrollRate); 
    } 

    function scrollDiv() { 

     if (!ReachedMaxScroll) { 
     DivElmnt.scrollTop = PreviousScrollTop; 
     PreviousScrollTop++; 

     ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight); 
     } 
     else { 
     ReachedMaxScroll = (DivElmnt.scrollTop == 0)?false:true; 

     DivElmnt.scrollTop = PreviousScrollTop; 
     PreviousScrollTop--; 
     } 
    } 

    function pauseDiv() { 
     clearInterval(ScrollInterval); 
    } 

    function resumeDiv() { 
     PreviousScrollTop = DivElmnt.scrollTop; 
     ScrollInterval = setInterval('scrollDiv()', ScrollRate); 
    } 
</script> 

ただし、divが少しスクロール可能な場合、これは面倒です。これはちょうど上下にバウンスするためです。

私の質問：

ではなく、それがスクロールダウン維持させるために、バウンスさせるのにそれがかのうです。ニュースフィードのようですが、その後は垂直です。 この方法では跳ね返ることはありませんが、滑らかに下に移動し続けます。

Answer 1

私の要件を理解しているように、これはデータに関係なくdivの下にスクロールしておくことで実現できます。

var objDiv = document.getElementById("your_div"); 
objDiv.scrollTop = objDiv.scrollHeight;