CSS Bootstrap 3 – 可滚动内容的div

在本文中，我们将介绍如何使用CSS Bootstrap 3创建一个可滚动的内容div。通过使用Bootstrap 3，我们可以轻松地为网页添加滚动功能，并为用户提供更好的浏览体验。

阅读更多：CSS 教程

理解可滚动内容div的概念

可滚动的内容div是指在一定高度的容器中包含了超过容器高度的内容，用户可以通过滚动条来查看隐藏的内容。在网页设计中，经常会遇到需要显示大量文本或图片的情况，如果所有内容都在一个不可滚动的div中，将会导致页面布局混乱，用户体验也会受到影响。因此，使用可滚动的内容div是非常重要的。

创建可滚动内容div的基本结构

首先，在HTML文件中添加一个div元素，指定一个特定的高度，用于包裹需要滚动的内容。然后，为这个div添加相应的CSS样式，以实现滚动功能。

<div class="scrollable-content">
  <!-- 内容 -->
</div>

.scrollable-content {
  height: 200px; /* 设置容器的高度 */
  overflow: auto; /* 添加滚动条 */
}

在上述代码中，我们给div元素添加了一个名为”scrollable-content”的类，通过CSS样式为该类添加了一个固定的高度和overflow属性。overflow属性设置为”auto”表示当内容超出容器大小时，会自动显示滚动条。

自定义滚动条样式

除了默认的滚动条样式，我们还可以根据需要自定义滚动条的样式，以与网页的整体设计风格相匹配。Bootstrap 3提供了一套名为”Custom Scrollbar”的插件，可以轻松地实现自定义滚动条样式。

首先，添加Bootstrap 3的CSS和JS文件，然后在HTML文件中引入Custom Scrollbar插件。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.5.2/css/bootstrap-theme.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/malihu-custom-scrollbar-plugin@3.1.5/jquery.mCustomScrollbar.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/malihu-custom-scrollbar-plugin@3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

然后，在需要滚动的内容div外部的脚本中添加以下代码。

$(document).ready(function() {
  $(".scrollable-content").mCustomScrollbar({
    theme: "dark" // 设置滚动条主题
  });
});

以上代码中，我们使用了jQuery和Custom Scrollbar插件。通过调用mCustomScrollbar()方法，并传入一个包含主题名称的对象，即可实现自定义滚动条样式。

示例 – 让长列表可滚动

假设我们有一个长列表，我们想要使其可滚动。

<div class="scrollable-content">
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
    <!-- ... 还有很多列表项 ... -->
  </ul>
</div>

使用上面提到的方法，我们可以将这个长列表包裹在一个可滚动的内容div中。

<div class="scrollable-content">
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
    <!-- ... 还有很多列表项 ... -->
  </ul>
</div>