如何分别滚动多个水平滚动容器？答案

【问题标题】：How to scroll multiple horizontal scroll containers separately?如何分别滚动多个水平滚动容器？
【发布时间】：2019-01-25 15:24:34
【问题描述】：

我是编码的新手，但我又一次偶然发现了另一个我自己似乎无法解决的问题。

对于一个旅游博客风格的网站，我希望有一个显示图块的垂直滚动菜单。瓷砖的大小和宽度始终相同。每个“行”代表一天，并且应该在侧面包含多个图块，使每一行成为垂直滚动容器内的水平滚动容器（您可以垂直滚动天，水平滚动每一天的条目）。

为了测试，我想出了一个简单的代码，令我惊讶的是，就“它可以工作”而言，它已经相当不错了。但是有一个问题：在水平滚动时，所有容器都会向左/向右滚动。

如何实现一次只有一个容器水平滚动，我错过了什么？

提前致谢！ :)

（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 css scroll horizontal-scrolling

【解决方案1】：

您在 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;
}

【讨论】：

哇，我真的很蠢。哈哈哈！非常感谢，它现在按预期工作！