2

I am trying to create two columns using flexbox which should be scrollable independently of each other. The first column should also be fixed. My big problem is, when my mouse pointer is inside the nav-section and I scroll up and down sometimes the other-content div will be scrolled instead of the navigation. (It's really simple to reproduce the problem. Just scroll the navigation to the end and scroll further then. The content side will then get scrolled down.) Does anyone of you did something similar before and know the problem?

<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            
            .app{
                display: flex;
                position: relative;
            }

            nav{
                
                width: 260px;
                height: 100%;
                position: relative;
            }

            .nav-content{
                width: 260px;
                overflow: scroll;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                background-color: coral;
            }

            .other-content{
                background-color: skyblue;
                flex-grow: 1;
            }
        </style>
    </head>
    <body>
        <div class="app">
            <nav>
                <div class="nav-content">
                    <ul>
                        <li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li>
                        <li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li>
                    </ul>
                </div>
            </nav>
            <div class="other-content">
                <div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div>
                <div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div>
                <div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div>
            </div>
        </div>
    </body>
</html>

Improve this question

2 Answers 2

Reset to default
1

If you don't care about browser support:

You can use overscroll-behavior property:

<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            
            .app{
                display: flex;
                position: relative;
                flex-direction: row;
            }

            nav{
                
                width: 260px;
                height: 100%;
                position: relative;
            }

            .nav-content{
                width: 260px;
                overflow: scroll;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                background-color: coral;
                overscroll-behavior: contain;
            }

            .other-content{
                background-color: skyblue;
                flex-grow: 1;
            }
        </style>
    </head>
    <body>
        <div class="app">
            <nav>
                <div class="nav-content">
                    <ul>
                        <li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li>
                        <li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li>
                    </ul>
                </div>
            </nav>
            <div class="other-content">
                <div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div>
                <div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div>
                <div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div>
            </div>
        </div>
    </body>
</html>

Javascript solutions:

Prevent scrolling of parent element when inner element scroll position reaches top/bottom? [duplicate]

Improve this answer
1
  • 1
    Thank you very much Wiktor! Had no clue how to search for this problem. I will use the javascript solution.
    – slow
    Commented Aug 17, 2021 at 13:36
1

That's the default behavior of CSS. It is called scroll chaining.

In order to prevent this behavior, add the following CSS -

.nav-content,
.other-content {
  overscroll-behavior: none;
}
Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.