在开发基于 bootstrap 的现代 web 界面时，我们经常需要创建具有独立滚动区域的组件，例如侧边栏、模态框内容或像本例中的卡片主体（card-body）。理想情况下，当这些局部区域的内容溢出时，它们应该拥有自己的滚动条，而页面的其余部分（即全局页面）则保持静止。然而，一个常见的问题是，即使局部区域已经有了滚动条，整个页面也可能出现多余的滚动条，导致用户界面混乱，并影响用户体验。本教程将指导您如何解决这一问题，确保只有指定的内容区域可以滚动。
要解决页面出现多余滚动条的问题，最直接且有效的方法是阻止 html 和 body 元素产生滚动。这可以通过 CSS 的 overflow 属性来实现。 具体来说，我们将 overflow-y: hidden; 和 overflow-x: hidden; 应用于 html 和 body 元素。
示例 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 布局中，这通常通过以下方式实现：
在提供的 HTML 结构中，card-body 已经通过 flex-fill 和 overflow-auto 进行了正确配置，位于一个 d-flex flex-column h-100 的父容器内，这确保了它能够占据可用空间并在内容溢出时自动滚动。
相关 HTML 结构片段：
<div class="container-fluid d-flex h-100 flex-column">
<!-- ... 其他内容 ... -->
<div class="row h-100">
<!-- ... 侧边栏 ... -->
<div class="col-10 p-0 h-100">
<div class="card w-100 h-100">
<form class="h-100" action="" method="post">
<div class="d-flex flex-column h-100">
<div class="card-header flex-fill text-center">
<!-- ... 输入框 ... -->
</div>
<div class="card-body flex-fill overflow-auto">
<!-- 这里是需要滚动的长文本内容 -->
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以上就是Bootstrap 5 页面滚动条控制：如何仅保留局部滚动的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
787
收藏
