悠悠楠杉
网站页面
flextree自动显示横向滚动条实现代码
06/01
在Web开发中，当我们需要展示一个数据量较大且以树状结构组织的flex布局时，经常需要实现横向滚动条以便用户可以查看完整的内容。下面，我将使用HTML、CSS和JavaScript（主要利用JavaScript）来演示如何创建一个可以自动显示横向滚动条的flex树。
1. HTML 结构
首先，我们创建一个基本的HTML结构，其中包括一个容器来容纳我们的flex树。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Tree with Scrollbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex-tree-container">
<!-- 动态生成树节点 -->
<div class="flex-tree-node" data-id="1">
节点1
<div class="flex-tree-node" data-id="1-1">节点1-1</div>
<div class="flex-tree-node" data-id="1-2">节点1-2</div>
</div>
<!-- 更多节点 -->
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS 样式
接下来，我们使用CSS来设置flex容器的样式，并确保它具备横向滚动条。
css
/* styles.css */
.flex-tree-container {
display: flex;
flex-direction: column; /* 垂直方向 */
overflow-y: auto; /* 允许垂直滚动 */
height: 400px; /* 设定高度 */
padding: 0;
margin: 0;
}
.flex-tree-node {
display: flex; /* 水平布局 */
align-items: center; /* 垂直居中 */
padding: 10px; /* 内边距 */
border: 1px solid #ccc; /* 边框 */
margin-bottom: 2px; /* 间隔 */
cursor: pointer; /* 鼠标悬停时显示指针 */
}
这段CSS使得.flex-tree-container在内容超出其高度时自动显示垂直滚动条，而.flex-tree-node则实现了横向布局的子节点，且每个节点之间有适当的间隔和内边距。
3. JavaScript 实现动态添加节点和滚动效果
为了使示例更生动和实用，我们使用JavaScript来动态添加更多的树节点并处理点击事件以显示或隐藏子节点。以下JavaScript代码示例将动态地生成更多节点并添加到DOM中：
```javascript
// script.js
document.addEventListener('DOMContentLoaded', function() {
const container = document.querySelector('.flex-tree-container');
const addNode = (parentId, text) => {
const newNode = document.createElement('div'); // 创建新节点元素
newNode.classList.add('flex-tree-node'); // 添加类以应用样式
newNode.dataset.id = parentId + '-' + Math.floor(Math.random() * 100); // 设置数据ID以区分子节点
newNode.textContent = text; // 设置文本内容为节点名称（或ID）等。
newNode.addEventListener('click', function() { // 为每个节点添加点击事件监听器。可以展开/收起子节点等。这里仅作为示例展示。 添加真实逻辑如节点的展开/收起等。 }) }); container.appendChild(newNode); // 将新创建的节点添加到容器中。 }); // 初始添加一些节点以填充示例 for (let i = 1; i <= 5; i++) { addNode(null, 节点${i}); } // 为第一级节点添加子节点 const firstLevelNodes = document.querySelectorAll('.flex-tree-node[data-id]'); firstLevelNodes.forEach(node => { const newChild = document.createElement('div'); newChild.classList.add('flex-tree-node'); newChild.dataset.id = node.dataset.id + '-1'; newChild.textContent = 子节点${Math.floor(Math.random() * 100)}; node.appendChild(newChild); }); }); });
