html - 如何分别滚动多个水平滚动容器?
问题描述
我是编码的新手,但我又一次偶然发现了另一个我似乎无法自己解决的问题。
对于一个旅游博客风格的网站,我想要一个显示图块的垂直滚动菜单。瓷砖的大小和宽度始终相同。每个“行”代表一天,并且应该在侧面包含多个图块,使每一行成为垂直滚动容器内的水平滚动容器(您可以垂直滚动天和水平滚动每天的条目)。
为了测试,我想出了一个简单的代码,令我惊讶的是,就“它可以工作”而言,它已经相当不错了。但是有一个问题:水平滚动时,所有容器都向左/向右滚动。
我如何实现一次只有一个容器水平滚动,我错过了什么?
提前致谢!:)
(PS:是的,瓷砖是为了无缝触摸,是的,我只禁用了 Chrome atm 的滚动条^^)
* {
padding: 0;
margin: 0;
}
#vertical_scroll_container {
width: 60vw;
height: 100vh;
overflow: scroll;
white-space: nowrap;
margin: 0 auto;
}
#vertical_scroll_container::-webkit-scrollbar {
display: none;
}
.horizontal_scroll_container {
width: 100%;
height: 240px;
overflow-y:scroll;
white-space: nowrap;
}
.horizontal_scroll_container::-webkit-scrollbar {
display: none;
}
.scroll_item {
position: relative;
display: inline-block;
height: 240px;
width: 50vw;
background-color: bisque;
}
.caption {
font-size: 26px;
font-family: sans-serif;
position: absolute;
left: 10px;
bottom: 10px;
}
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="vertical_scroll_container">
<div class="horizontail_scroll_container">
<div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div><!--
--><div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div><!--
--><div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div><!--
--></div>
<div class="horizontail_scroll_container">
<div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div><!--
--><div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div>
</div>
<div class="horizontail_scroll_container">
<div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div>
</div>
<div class="horizontail_scroll_container">
<div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div><!--
--><div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div><!--
--><div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div><!--
--></div>
<div class="horizontail_scroll_container">
<div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div><!--
--><div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div>
</div>
<div class="horizontail_scroll_container">
<div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div>
</div>
<div class="horizontail_scroll_container">
<div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div><!--
--><div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div><!--
--><div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div><!--
--></div>
<div class="horizontail_scroll_container">
<div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div><!--
--><div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div>
</div>
<div class="horizontail_scroll_container">
<div class="scroll_item">
<p class="caption">Titel in<br>bis zu<br>drei Zeilen</p>
</div>
</div>
</div>
</body>
</html>
解决方案
您在 html 中有错字(横尾而不是横),并尝试更改为:
#vertical_scroll_container {
width: 60vw;
height: 100vh;
overflow-x: hidden; <-- you don't want scroll sideways here.
white-space: nowrap;
margin: 0 auto;
}
x 是水平的,所以:
.horizontal_scroll_container {
width: 100%;
height: 240px;
overflow-x: scroll; <-- or auto, to have the content scrollable
white-space: nowrap;
}
推荐阅读
- node.js - 如何获取通过贝宝交易发送的变量(NODEJS)
- visual-studio-2010 - 打开 Visual Studio 项目时出现 TFS“GO ONLINE”消息
- image - 确定图像中的欧几里得距离
- javascript - 尝试运行测试套件时如何解决开玩笑错误?
- python - 如何跟踪添加的项目以做出最终结果?
- python - Python中日期之间的减法错误
- javascript - AJAX 总是在一段时间后失败
- ssas - 在 SSAS 中聚合计算成员的结果
- java - 如何在原始数据类型数组上调用 java 内置 TimSort
- java - 在 Jasper Report as Svg 中生成 3 个不同图像时的 Java 内存问题