纵向导航栏使用navbar-nav-scroll溢出截断问题

凉拌糖醋鱼

已于 2024-06-03 00:04:18 修改

阅读量1k

点赞数 22

分类专栏：踩坑日志文章标签： Bootstrap java 前端

于 2024-06-01 17:32:39 首次发布

本文链接：https://blog.csdn.net/weixin_44803446/article/details/139375977

版权

项目场景：

项目首页组件：Bootstrap-4.6.2、JQuery 3.7.1
测试浏览器：Firefox126.0.1、Microsoft Edge125.0.2535.67
IDE：eclipes2024-03.R

在编写CRM的工作台主页面时，由于该页面使用的是较旧的技术，所以打算使用Bootstrap重写响应式页面，主要使用了Bootstrap的格栅布局系统。在编写左侧纵向导航栏时，发现添加滚动条后，导航栏下面缩短了一部分流出大部分空白，使得页面不美观。

溢出截断
问题代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="/crm-core/css/bootstrap_css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/crm-core/js/jquery/jquery-3.7.1-min.js"></script>
<!-- bootstrap.bundle.js包含了popper.min.js，这个是下拉菜单的依赖 -->
<script type="text/javascript" src="/crm-core/js/bootstrap_js/bootstrap.bundle.js"></script>
<script type="text/javascript">
   ...
</script>
</head>
<body>
	...
		<!-- 中间部分 -->
		<div id="center" style="position: absolute; top: 50px; bottom: 30px; left: 0px; right: 0px;">
		<!-- 导航 -->
		<div class="col-2 border-right navbar-nav-scroll" style="height: 100%;">
                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button"
                        role="tab" aria-controls="v-pills-home" aria-selected="true">工作台</button>
                </div>
            </div>
			<!-- 右侧框架栏 -->
			<div class="col-10 iframe-container">
				<div class="embed-responsive embed-responsive-16by9">
					<iframe class="embed-responsive-item border border-white" name="workareaFrame"></iframe>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

问题描述

经过测试后，发现是在添加了navbar-nav-scroll后出现截断问题，但是该类如果删除会导致在滚动页面时右侧的<iframe>也会跟着滚动，这不是我所期望的，我想要的只是左侧的导航栏在溢出时滚动，而右侧的<iframe>框架只是用来显示左侧各导航栏对应的页面。
在尝试不再使用Flex布局时，移除了flex-column相关内容后，又出现了按钮组垂直排列错位、按钮无法点击跳转链接、导航栏点击动态特效消失等问题。

原因分析：

尝试了诸多方法，官方文档也没有给出相关问题的解决方案，AI也没有给出准确的解决方案，在问了别人说的可能是Flex 布局下居中溢出滚动截断问题，看了几篇文章，不过在尝试后也并没有达到预期效果，只是知道不应该用Flex布局。
Bootstrap官网给出的示例中没有给出纵向导航栏跳转链接等相关内容，而由于不懂前端，只好复制过来稍微改了改，存在属性冲突的情况。
既然官方给的类无法满足要求，只能用js代码实现。

解决方案：

放弃使用Flex相关代码，以Grid布局进行排版，并指定垂直高度
使用列表组代替nav，通过给<a>标签绑定"btn"类得到一组按钮列表组。
使用js代码实现纵向导航栏点击的动态效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="/crm-core/css/bootstrap_css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/crm-core/js/jquery/jquery-3.7.1-min.js"></script>
<!-- bootstrap.bundle.js包含了popper.min.js，这个是下拉菜单的依赖 -->
<script type="text/javascript" src="/crm-core/js/bootstrap_js/bootstrap.bundle.js"></script>
<script type="text/javascript">
    // 通过js发送ajax请求，获取session中的用户姓名
    $(function() {
     
	$.ajax({
     
	    url : '/crm-core/workbench/getName.do',
	    type : "post",
	    dataType : "json",
	    success : function(data) {
     
		console.log(data);
		$("#userName").text(data.userName);
	    }
	})
    });

    // 安全退出功能
    $(document).ready(function() {
     
	// 等模态框加载完成后再调用
	$('#exitModal').on('shown.bs.modal', function() {
     
	    $('#logoutBtn').on('click', function() {
     
		window.location.href = "/crm-core/settings/qx/user/logout.do";
	    });
	});
    });

    //页面加载完毕
    $(function() {
     
	// 一登录就在框架窗口中显示工作台
	window.open("/crm-core/workbench/main/index.do", "workareaFrame");

    });
    // 通过js代码实现导航栏点击特效
    // 导航栏点击动态
    document.addEventListener('DOMContentLoaded', function() {
     
	var buttonGroup = document.getElementById('myButtonGroup');
	var buttons = buttonGroup.getElementsByClassName('btn');
    // 初始化点击事件  
	for (var i = 0; i < buttons.length; i++) {
     
	    buttons[i].addEventListener('click', function(e) {
     
		// 移除组内所有按钮的 active 类  
		for (var j = 0; j < buttons.length; j++) {
     
		    buttons[j].classList.remove('active');
		}
		// 给当前点击的按钮添加 active 类  
		this.classList.add('active');

		// 阻止事件冒泡到按钮组外部（可选，如果外部有事件监听器࿰