Bootstrap 5 页面滚动条控制：如何仅保留局部滚动

引言：局部滚动与全局滚动冲突

在开发基于 bootstrap 的现代 web 界面时，我们经常需要创建具有独立滚动区域的组件，例如侧边栏、模态框内容或像本例中的卡片主体（card-body）。理想情况下，当这些局部区域的内容溢出时，它们应该拥有自己的滚动条，而页面的其余部分（即全局页面）则保持静止。然而，一个常见的问题是，即使局部区域已经有了滚动条，整个页面也可能出现多余的滚动条，导致用户界面混乱，并影响用户体验。本教程将指导您如何解决这一问题，确保只有指定的内容区域可以滚动。

核心解决方案：禁用全局页面滚动

要解决页面出现多余滚动条的问题，最直接且有效的方法是阻止 html 和 body 元素产生滚动。这可以通过 CSS 的 overflow 属性来实现。 具体来说，我们将 overflow-y: hidden; 和 overflow-x: hidden; 应用于 html 和 body 元素。

• overflow-y: hidden;：禁用垂直方向的页面滚动条。
• overflow-x: hidden;：禁用水平方向的页面滚动条。 同时，为了确保页面内容能够正确地占据整个视口高度，html 和 body 元素还需要设置 height: 100%;。

示例 CSS 代码：

html, body {
    height: 100%; /* 确保html和body占据整个视口高度 */
    overflow-y: hidden; /* 禁用垂直方向的页面滚动 */
    overflow-x: hidden; /* 禁用水平方向的页面滚动 */
}

/* 保持原有样式，确保布局高度正确 */
.ts_panel {
    height: 100%;
    border-right: 2px solid #646464;
    background: rgb(44,44,44);
}

.ts_usernameInp {
    width: 40%;
    margin: 0 auto;
}

确保局部内容区域的独立滚动

在禁用全局滚动后，我们需要确保目标局部区域（例如 card-body）能够按照预期进行滚动。在 Bootstrap 布局中，这通常通过以下方式实现：

1. 高度管理： 确保 card-body 及其所有父容器（从 html 到 card-body 自身）都具有明确定义的高度，通常通过 height: 100%、flex-fill 或具体的像素/视口高度来设置。这使得浏览器能够计算出 card-body 可用的确切空间。
2. overflow-auto 或 overflow-y: auto： 将 overflow-auto 或 overflow-y: auto 应用于需要滚动的局部元素。当该元素的内容超出其指定高度时，浏览器会自动为其添加滚动条。

在提供的 HTML 结构中，card-body 已经通过 flex-fill 和 overflow-auto 进行了正确配置，位于一个 d-flex flex-column h-100 的父容器内，这确保了它能够占据可用空间并在内容溢出时自动滚动。

Dora

创建令人惊叹的3D动画网站，无需编写一行代码。

下载

相关 HTML 结构片段：

    
    

        
        

            

                

                    

                        

                            
                        
                        

                            
                            Obcaecati dolor quam voluptate praesentium quaerat et maxime provident tempora alias suscipit facere est, laborum ad aperiam quas animi corporis neque delectus nostrum hic nisi! Omnis, ea atque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, nam expedita fugiat aperiam, ad corporis voluptatem laudantium assumenda deleniti, cum quasi voluptatibus. Beatae cum ratione debitis expedita ducimus veritatis suscipit, quod aperiam magni nihil ab voluptas dolorum eaque? At necessitatibus tempora enim, quisquam possimus ipsa provident fugiat quaerat nobis. Delectus aliquam porro beatae rerum eligendi distinctio ab voluptatem vero dignissimos neque in itaque maiores nostrum aspernatur excepturi, minima totam magni nesciunt blanditiis, accusamus hic consequatur! Sint eveniet error optio corrupti dicta dolores reprehenderit quas molestiae, saepe exercitationem culpa commodi doloremque cum rem quod sit accusamus enim alias. Quod dolore veritatis a magni, dolor cum quo libero enim reprehenderit, aut ex, nobis et possimus reiciendis dolorem. Quae, fugit quasi! Voluptatum saepe numquam quam, nobis sint ipsam maiores sunt? Eius ab quasi aut ullam aliquam architecto, placeat optio dolorum cumque odio dolorem recusandae explicabo cum. Consequuntur odit a illum tenetur illo exercitationem architecto soluta corrupti, temporibus voluptate consequatur maxime impedit praesentium quisquam eius dolorem. Aspernatur, neque tenetur corporis inventore quisquam aliquid perferendis eaque doloremque. Laborum laboriosam magnam alias nam blanditiis temporibus omnis dolor, quae sint modi officiis earum possimus voluptatibus. Molestiae nihil debitis repellat provident officiis sint quaerat aliquam eos eum accusantium aliquid, quam exercitationem nesciunt dolorum, sunt maxime. Consequatur consectetur sunt explicabo aperiam ips