无限滚动div

Question

我有一个 div 显示今天有哪些会议以及它们在哪个房间。

现在我通过这个展示它：

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

现在这向我展示了所需的数据。

现在它在一个 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;