Question

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

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

为了进行测试，我想出了一个简单的代码，令我吃惊的是，它在“按需完成”方面已经可以了。但是有一个问题：在水平滚动时，所有容器都向左/向右滚动。

如何完成一次只有一个容器水平滚动的操作，我想念什么？

提前谢谢！：）

（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>

Answer 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;
}

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

1 个答案: