jQuery/CSS: Scroll inside div instead of scrolling window

Question

I have this:

<body>

    <div id="dummy_top_frame"></div>

    <div id="frame">
    
        <div id="container">
        
            content
        
        </div>
    
    </div>

</body>

html,
body,
#frame{
   -ms-overflow-style: none;
    scrollbar-width: none;
}
    
body::-webkit-scrollbar,
#frame::-webkit-scrollbar{
    display: none;
    width: 0;
    height: 0;
}
    
body{
    margin:0px; 
    padding:0px;
    background:#333;
}

#dummy_top_frame{
    position:absolute;
    top:40px;
    width:598px;
    height:150px;
    left:50%;
    margin-left:-300px;
    border:1px solid white;
    border-bottom:none;
    background:black;
}
    
#frame{
    position:fixed;
    top:41px;
    width:600px;
    left:50%;
    margin-left:-300px;
    height: calc( 100% - 41px);
    overflow:scroll;
}
    
#container{
    position:relative;
    width:598px;
    border:1px solid white;
    border-top:none;
    margin-bottom:140px;
    background:black;
    color:white;
}

When I mouse scroll inside the #container div, its content scrolls up and down alright and I get the overall effect that I want.

But I would like the #container div to also scroll up and down when mouse scrolling over the body. Wherever I scroll on the page, the only thing that should move is the content of the container div.

I figured a simple jQuery function would be appropriate as this solution is proposed quite often in stack overflow.

$(window).scroll(function(){
    $('#container').scrollTop($(this).scrollTop());
});

But this doesn't work. So, how can I make the #container div scroll when scrolling outside of it?

Here is a jsfiddle to see this in action: https://jsfiddle.net/ubhvmy8q/

Thank you

AFAIS you need some css to set the overflow to hidden on the most outer container — john Smith, Jan 12 '23 at 07:29
Thanks but it didn't work. I rephrased my question so that it reflects what I'm actually trying to do, code included. — Bachir Messaouri, Jan 12 '23 at 08:40

score 0 · Answer 1 · answered Jan 12 '23 at 22:06

0

This worked :

$(window).on('mousewheel',function(event) {
    var scroll = $('#frame').scrollTop();
    $('#frame').scrollTop(scroll - event.originalEvent.wheelDeltaY);
});

Thanks.

answered Jan 12 '23 at 22:06

Bachir Messaouri

754
2
8
31

jQuery/CSS: Scroll inside div instead of scrolling window

1 Answers1