CODEWITHSUNDEEP
htmlcssscrollhorizontal-scrolling
tupikyo
tupikyo

Reputation: 33

How to scroll multiple horizontal scroll containers separately?

I'm a rather newbie to coding and yet again I stumbled upon another problem that I can't seem to solve by myself.

For a travel-blog-ish website I would like to have a vertical scroll menu displaying tiles. The tiles are always the same size and width. Each "row" represents a single day and is supposed to contain multiple tiles to the side, making each row a horizontal scroll container within the vertical scroll container (You can scroll the days vertically and each day's entries horizontally).

For testing I came up with a simple code that is, to my surprise, pretty okay-ish already in terms of "does-it-work". But there is one problem: Upon scrolling horizontally ALL the containers scroll left/right.

How do I accomplish that only a single container is scrolling horizontally at a time, what am I missing on?

Thanks in advance! :)

(PS: Yes, the tiles are meant to touch seamlessly and yes, I only have the scroll bars disabled for 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>

Upvotes: 2

Views: 1334

Answers (1)

Fredric Fohlin
Fredric Fohlin

Reputation: 124

You have a typo in the html (horizontail instead of horizontal), and try changing to:

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

And x is horizontal, so:

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

Upvotes: 2

Related Questions