javascript - 如何创建水平滚动容器包含多行
问题描述
我试图制作一个数据网格，其中粘性导航栏可以与它下面的内容一起水平滚动。然而，行为在两个场景中发生了变化。
- 当最外层框太窄时，主区域可以水平滚动，但是 和 的宽度
nav受限rows于父框的宽度，导致背景颜色的不良行为。- 这可以通过设置两者的宽度
nav来rows解决fit-content
- 这可以通过设置两者的宽度
- 当最外面的盒子太宽时，因为宽度已经设置为
fit-content，所有行都收缩到左侧而不是填满整行。- 这可以通过设置两者的宽度
nav来rows解决100%
- 这可以通过设置两者的宽度
那么我应该怎么做才能让他们在这两种情况下都表现得正确。
我尝试过的其他解决方案：
- 但是，使用
flex-rowwith时，当内容的宽度太小时warp，导航栏和行将位于同一行。 - 使用
inline-blockinnav和inline-flexinrows，行为同上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.grid {
height: 60px;
width: 200px;
overflow: auto;
}
.subgrid {
}
.nav {
position: sticky;
top: 0;
background: #da1039;
}
.rows {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
background: #00b89c;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-evenly;
}
.rowitem {
border: 1px solid;
min-width: 20px;
}
</style>
</head>
<body>
<div class="grid">
<div class="subgrid">
<div class="nav">
<div class="row">
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
</div>
</div>
<div class="rows">
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.grid {
height: 60px;
width: 50px;
overflow: auto;
}
.subgrid {
}
.nav {
position: sticky;
top: 0;
background: #da1039;
}
.rows {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
background: #00b89c;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-evenly;
}
.rowitem {
border: 1px solid;
min-width: 20px;
}
</style>
</head>
<body>
<div class="grid">
<div class="subgrid">
<div class="nav">
<div class="row">
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
</div>
</div>
<div class="rows">
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
</div>
</div>
</div>
</body>
</html>解决方案
您实际上可以将两者结合起来。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.grid-1 {
height: 60px;
width: 200px;
overflow: auto;
}
.grid-2 {
height: 60px;
width: 900px;
overflow: auto;
}
/* here */
.nav {
min-width: fit-content;
max-width: 100%;
position: sticky;
top: 0;
background: #da1039;
}
.rows {
min-width: fit-content;
max-width: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
background: #00b89c;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-evenly;
}
.rowitem {
border: 1px solid;
min-width: 20px;
}
</style>
</head>
<body>
<div class="grid-1">
<div class="nav">
<div class="row">
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
</div>
</div>
<div class="rows">
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
</div>
</div>
</div>
<div style="height: 20px"></div>
<div class="grid-2">
<div class="nav">
<div class="row">
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
<div class="rowitem">HHH</div>
</div>
</div>
<div class="rows">
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
<div class="row">
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
<div class="rowitem">AAA</div>
</div>
</div>
</div>
</body>
</html>推荐阅读
- java - entityManager.remove(class) 不起作用
- php - 如何在不使用 PHP MVC 中的 Extend 的情况下将数据库操作层与 BaseModel 层分离？
- c# - 变量和垃圾回收的生命周期
- c# - 当 GoogleDriveApplication 托管在 IIS 服务器中时，无法启动浏览器
- ruby - 如何将嵌套的哈希参数传递给 searchkick
- visual-studio-code - VsCode：如何避免为每个编辑器组打开多个文件？
- python - anaconda/python 3.6/MacOS 10：gdal 意外停止工作（ImportError）
- javascript - SP 2013 通过 API 将用户添加到 SP 组而不授予权限
- gitlab - 从头开始创建一个 Git 项目
- arrays - Pyspark数据框：计算数组或列表中的元素