Как прокрутить несколько контейнеров горизонтальной прокрутки отдельно? - PullRequest
Новая
       35

Как прокрутить несколько контейнеров горизонтальной прокрутки отдельно?

0 голосов
/ 25 января 2019

Я довольно новичок в кодировании, и все же я наткнулся на еще одну проблему, которую сам, похоже, не могу решить.

Для веб-сайта travel-blog-ish я хотел бы иметьвертикальное меню прокрутки с отображением плиток.Плитка всегда одинакового размера и ширины.Каждая «строка» представляет один день и должна содержать несколько плиток в сторону, делая каждую строку контейнером горизонтальной прокрутки в контейнере вертикальной прокрутки (Вы можете прокручивать дни по вертикали и записи каждого дня по горизонтали).

Для тестирования я придумал простой код, который, к моему удивлению, довольно хорошо понимается уже с точки зрения «работает».Но есть одна проблема: при горизонтальной прокрутке ВСЕ контейнеры прокручиваются влево / вправо.

Как мне добиться, чтобы только один контейнер прокручивал по горизонтали за раз, чего мне не хватает?

Заранее спасибо!:)

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

1 Ответ

0 голосов
/ 25 января 2019

У вас есть опечатка в html (горизонт вместо горизонтального), и попробуйте изменить на: 

#vertical_scroll_container {
    width: 60vw;
    height: 100vh;
    overflow-x: hidden; <-- you don't want scroll sideways here.
    white-space: nowrap;
    margin: 0 auto;
}

А х горизонтально, поэтому: 

.horizontal_scroll_container {
    width: 100%;
    height: 240px;
    overflow-x: scroll; <-- or auto, to have the content scrollable
    white-space: nowrap;
}
...