CODEWITHSUNDEEP
csscss-positionzurb-foundationpositioning
tty6
tty6

Reputation: 1233

Making div scrollable instead of page

How I can do somthing like that? The question is not about how to write the full code. The question is about how to make such scroll behaviour

Scrolling page

The upper menu should be fixed. When the menu reaches div2, div2 starts to scroll. When div2 is finished, it resumes to normal interaction.

Upvotes: 3

Views: 1544

Answers (2)

Dextere
Dextere

Reputation: 301

Try doing 

style="overflow-y: hidden" //at page level

style="overflow-y: scroll" //at main div

Upvotes: 2

OJFord
OJFord

Reputation: 11140

I'm not totally clear on whether the left and right portions of your diagram are elements, or if that's just the size of the browser beyond the width of your site?

Assuming the latter, in this case it's actually simpler than you're expecting.

You don't need to fix everything and scroll just a div element, that would require some JS, which you don't actually need at all in this case.

Instead - just think of it as the page still scrolling as usual, no messing with the scroll interaction, but you fix the menu div at the top with position: fixed; in CSS.

The other div elements should automatically scroll behind, but if they don't for some reason due to your actual code, then you can force the menu in front with a z-index - it's better to avoid this though, since quickly become hard to maintain or add to.

If you did specifically want to scroll a div only - div1 separately from div2 say - then you could clunkily solve this with an iframe for each. There's no doubt a better JS solution to this, but I'm not JSavvy enough to provide it.

Upvotes: 1

Related Questions