Bootstrap 4滚动条在2个div上并排固定和流动宽度

基础概念

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动优先的网站。Bootstrap 4 提供了许多预定义的 CSS 类和 JavaScript 插件，以简化网页设计和开发。

滚动条（Scrollbar）是浏览器提供的一种界面元素，用于在内容超出容器显示范围时，允许用户通过滚动查看隐藏的内容。

类型

滚动条可以分为两种类型：

固定宽度：滚动条的宽度是固定的，不会随着内容的多少而变化。
流动宽度：滚动条的宽度会根据内容的多少而变化。

应用场景

滚动条通常用于以下场景：

当内容超出容器的显示范围时。
需要在一个有限的空间内展示大量信息时。

实现方法

要在 Bootstrap 4 中实现两个并排的 div，一个固定宽度滚动条，一个流动宽度滚动条，可以使用以下 HTML 和 CSS 代码：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Scrollbar Example</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .fixed-scrollbar {
            width: 300px;
            overflow-y: scroll;
            height: 300px;
            border: 1px solid #ccc;
        }
        .fluid-scrollbar {
            flex-grow: 1;
            overflow-y: auto;
            height: 300px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-6">
                <div class="fixed-scrollbar">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="fluid-scrollbar">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

.fixed-scrollbar {
    width: 300px;
    overflow-y: scroll;
    height: 300px;
    border: 1px solid #ccc;
}

.fluid-scrollbar {
    flex-grow: 1;
    overflow-y: auto;
    height: 300px;
    border: 1px solid #ccc;
}

解决常见问题

问题：滚动条不显示

原因：

容器的高度没有设置，导致内容没有超出显示范围。
overflow 属性没有正确设置。

解决方法：确保容器的高度已经设置，并且 overflow-y 属性设置为 scroll 或 auto。

.fixed-scrollbar {
    width: 300px;
    overflow-y: scroll;
    height: 300px;
    border: 1px solid #ccc;
}

问题：滚动条宽度不一致

原因：不同浏览器对滚动条的默认样式处理不同。

解决方法：使用 CSS 重置滚动条样式，确保在不同浏览器中显示一致。

/* 自定义滚动条样式 */
.fixed-scrollbar::-webkit-scrollbar {
    width: 10px;
}

.fixed-scrollbar::-webkit-scrollbar-thumb {
    background-color: #888;
}

.fixed-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}