javascript - 如何解决滚动问题？
问题描述
body {
overflow: hidden;
}
.wrapper {
overflow-y: auto;
overflow-x: hidden;
display: flex;
height: 30vh;
margin: 24px;
background: rgb(194,194,194);
}
.sidebar {
flex: 0 0 150px;
padding: 12px;
background: rgb(245, 134, 134);
}
.content {
flex: 1 1 auto;
width: calc(100% - 150px);
padding: 12px;
background: rgb(11, 134, 134);
}
.content-inner {
display: flex;
}
.content-inner > p {
flex: 0 0 80px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Great Demo on CodePen</title>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<header>Sidebar</header>
<div class="sidebar-content">
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
</div>
</div>
<div class="content">
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
</body>
</html>我有一个奇怪的情况，但我希望它是真实的，一般来说。
如您所见，整个包装器垂直滚动。预期的行为是我希望该content部分水平滚动而不影响侧边栏（意味着水平滚动时sidebar应该始终可见和静态），同时，整个内容应该像现在一样垂直滚动。我只能实现第一种情况，但在这种情况下，当整个内容被垂直滚动时，content垂直滚动条部分会导致它的内容被垂直剪切。
请注意，水平滚动条应该在视口上可见，而不是在整个内容的底部，因为内容可能会更长
我想通过CSS. 我可以用我假设的 JavaScript 来做到这一点，但最好由 CSS 来完成。
解决方案
我进行了这两项更改以使其正常工作-
- 添加
align-items: flex-start到.wrapper，这解决了容器被切割的问题。 - 添加
overflow-x: auto到.content, 以启用水平滚动。
body {
overflow: hidden;
}
.wrapper {
overflow-y: auto;
overflow-x: hidden;
display: flex;
height: 40vh;
margin: 24px;
background: rgb(194,194,194);
align-items: flex-start;
}
.sidebar {
flex: 0 0 150px;
padding: 12px;
background: rgb(245, 134, 134);
}
.content {
overflow-x: auto;
flex: 1 1 auto;
width: calc(100% - 150px);
padding: 12px;
background: rgb(11, 134, 134);
}
.content-inner {
display: flex;
}
.content-inner > p {
flex: 0 0 80px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Great Demo on CodePen</title>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<header>Sidebar</header>
<div class="sidebar-content">
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
<p>Sidebar content</p>
</div>
</div>
<div class="content">
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="content-inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
</body>
</html>推荐阅读
- python - 使用python的多级分类excel数据表示
- php - Laravel - 如何从嵌套关系中提取字段
- android - 应用程序不合规并被删除：安全漏洞：不安全的主机名验证
- html - 如何在 vuejs 中删除 v-app-bar 下的空间？
- opencv - CV2二值化处理后的图像
- ruby-on-rails - 生产中的数据库创建问题
- tableau-api - 带有多个度量的饼图标签上的百分比 Tableau
- createml - Xcode 的“Create ML”开发者工具总是“在 10 次迭代的早期收敛”
- sql - Teradata 中的另一种运行总计
- javascript - 向数组添加 1 - Javascript