给div加滚动条 div显示滚动条设置代码

给div元素添加滚动条可以通过CSS的overflow属性来实现，overflow的值可以设置为auto、scroll或hidden，分别表示自动显示滚动条、强制显示滚动条、隐藏滚动条。

具体实现步骤如下：

1.创建div标签（例如id为mydiv的div元素）

<div id="mydiv" style="width:200px; height:200px;">
  我是一个需要滚动条的div元素
</div>

2.在CSS样式表中添加div元素的样式，设置overflow属性为scroll或auto

#mydiv {
  width: 200px;
  height: 200px;
  overflow: auto; /* 自动显示滚动条 */
}

或者

#mydiv {
  width: 200px;
  height: 200px;
  overflow: scroll; /* 强制显示滚动条 */
}

3.完成以上操作，就可以在div元素内部显示滚动条了。

示例说明1：

<div id="mydiv" style="width:200px; height:200px; overflow: auto;">
  <ul>
    <li>苹果</li>
    <li>桃子</li>
    <li>梨</li>
    <li>香蕉</li>
    <li>柚子</li>
    <li>葡萄</li>
    <li>水蜜桃</li>
    <li>菠萝</li>
    <li>西瓜</li>
    <li>草莓</li>
    <li>芒果</li>
    <li>榴莲</li>
    <li>柠檬</li>
    <li>橙子</li>
    <li>柿子</li>
  </ul>
</div>

在上述示例中，div元素内包含一个ul列表，当div内部内容超出容器高度时，会自动显示垂直滚动条。

示例说明2：

<div id="mydiv" style="width:300px; height:150px; overflow: scroll;">
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>籍贯</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>25</td>
      <td>广州</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>28</td>
      <td>深圳</td>
    </tr>
    <tr>
      <td>孙七</td>
      <td>30</td>
      <td>成都</td>
    </tr>
    <tr>
      <td>周八</td>
      <td>32</td>
      <td>重庆</td>
    </tr>
  </table>
</div>

在上述示例中，div元素内包含一个table表格，当div内部内容超出容器高度或宽度时，会强制显示垂直和水平滚动条。