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>

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

现在它需要自动向上和向下滚动。这是通过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;

无限滚动div

1 个答案: