javascript - 将滚动条放到 div 上，并将获取的数据放入其中

Question

你好，我想在我的 div 中放置一个滚动条，并将所有获取的数据放入其中。有人可以帮助我并给我一些想法吗？我刚开始学习 php 和 html。

这是我想做的事的例子。一模一样。

这是我的作品。我想在 3 个 div、事件、新闻和公告中放置一个滚动条。

这里是消息、事件和公告的代码。

   <div class="content">
     <div class="container">
      <div class="row">

      <div class="col-xs-12 col-md-9">
     <div class="fix leftbar floatleft">
        <div class="fix left_sidebar">
           <div class="news">
              <h2><i class="fa fa-newspaper-o"></i> Latest News</h2>
              <hr class="carved">


                     <?php
                     include_once('connection.php');
                     $sql ="SELECT * FROM news ORDER BY news_id ASC limit 4";
                     $result = mysqli_query($con, $sql);

                     while($row = mysqli_fetch_array($result)){
                     $title = $row['news_title'];
                     $date = $row['news_date'];
                     $content = $row['news_content'];
                     $newsimage = $row['news_image'];
                     ?>
                     <div class="fix single_news">
                       <div class="single_image">
                           <img src="<?php echo $newsimage; ?>" alt="court">
                       </div>
                       <a href="#"><?php echo $title; ?></a>
                       <p><?php echo $date; ?></p>
                     <p><?php echo $content; ?></p>
                     </div>
                      <hr>
                    <?php
                     }
                     ?>   


                <a href="#" class="view_news">View More News</a>

            </div>
        </div>
    </div>
    </div>

   <div class="col-xs-6 col-md-3">
   <div class="fix sidebar floatright">
        <div class="fix single_sidebar">
            <div class="events">
                <h2><i class="fa fa-calendar"></i> Upcoming events</h2>
                           <hr class="carved">
                            <div class="fix single_events">
                                <div class="date">
                                     <span class="month">August</span>
                                      <h1 class="day">28</h1>
                                 </div>
                                <h2>Independence Day</h2>
                                <p>7:00 AM - 8:00 PM</p>
                            </div>
                            <hr>
                            <div class="fix single_events">
                                <div class="date">
                                 <span class="month">August</span>
                                 <h1 class="day">28</h1>
                                 </div>
                                <h2>New Year</h2>
                                <p>7:00 AM - 8:00 PM</p>
                            </div>
                            <hr>
                            <div class="fix single_events">
                                 <div class="date">
                                 <span class="month">August</span>
                                 <h1 class="day">28</h1>
                                 </div>
                                <h2>Thesis Defense</h2>
                                <p>7:00 AM - 8:00 PM</p>
                            </div>
                                      <hr>
                            <a href="#" class="view_calendar">View Academic Calendar</a>
            </div>
        </div>
   </div>
   </div>

   <div class="col-xs-6 col-md-3">
        <div class="fix bottombar floatright">
        <div class="fix bottom_bar">
            <div class="announcements">
                        <h2><i class="fa fa-bullhorn"></i> Announcements</h2>
                           <hr class="carved">
                            <div class="fix single_announce">
                                <a href="#">Sample Announcements</a>
                            </div> 

                            <div class="fix single_announce">
                                <a href="#">Sample Announcements</a>
                            </div> 

                            <div class="fix single_announce">
                                <a href="#">Sample Announcements</a>
                            </div> 

                            <div class="fix single_announce">
                                <a href="#">Sample Announcements</a>
                            </div> 

                            <div class="fix single_announce">
                                <a href="#">Sample Announcements</a>
                            </div> 

                            <div class="fix single_announce">
                                <a href="#">Sample Announcements</a>
                            </div> 

                            <div class="fix single_announce">
                                <a href="#">Sample Announcements</a>
                            </div> 

                                      <hr>
                            <a href ="#" class="view_announcements">View more announcements</a>

            </div>
        </div>
        </div>
   </div>


    </div>

  </div>
 </div>

Answer 1

如果想让div滚动，设置height和overflow滚动

.scrollDiv{
    display:block;
    max-height:150px; /*Put your maximum height here*/
    overflow-y:scroll; /*Tell it to scroll if the content is larger than max-height*/
}