CODEWITHSUNDEEP
csstwitter-bootstrapscrollbaroverflow
roland
roland

Reputation: 7775

2 columns layout: how to make the 2 columns scrolling independently

I bought a Bootstrap Theme a while ago and I need to customize it. I target only 1024px screen and above.

Here is the demo page: http://wbpreview.com/previews/WB05FN804/

Basically the theme is a 2-columns layout. Wherever your cursor is on the page you scroll up and down the right/main column. Therefore if your cursor is on the left columns, scrolling up and down scrolls the whole page.

I'd like to provide a 2 scrolling mechanism: a specific scroll for the left columns and a specific scroll for the main/right column.

I added overflow: scroll on <nav id="primary">. It is working; it you open all the folder menus in order to exceed the height, you can scroll up and down.

However when you reach the top or the bottom, it continues to scroll the right column.

This is what I want to fix.

How can I achieve it?

Thanks in advance

Upvotes: 0

Views: 861

Answers (1)

nxa
nxa

Reputation: 3063

Now your page is leveraging browser scroll feature. One robust way to prevent right column to stop scrolling when you are in left navigation is to set Overflow:Hidden; to the body and remove overflow inline css when you mouse out from primary nav..

Simple jQuery should help you?

$("#primary").hover(
    function(){$("body").css("overflow", "hidden")}, 
    function(){$("body").css("overflow", "")}
);

Hope this helps!

Upvotes: 1

Related Questions