0

I am working on a website where I need the menu in the sidebar to be scrollable, however, the content next to it should not be scrolled.

About the class(menu) The height of this element is the height of the screen.

My problem is that the class (menu) keeps on going behind the (social-follow) class, but the height sort of has to stop when it reaches the social-follow container, I've tried with overflow:hidden, but that didn't work. Beneath the "Kontakt os" menu there actually is an item, but as you can see it is not visible, and can be scrolled down so you can see it either, which I am trying to fix.

Example:

text;

Anders
  • 461
  • 2
  • 7
  • 28
  • Why not make the menu height = screenHeight - socialFollowHeight ? – Eric Guan Nov 23 '15 at 18:08
  • You'll have to add a live example of the problem, there are too many parameters and details missing in your question – Alon Eitan Nov 23 '15 at 18:12
  • @EricGuan - That actually worked, I added overflow-y:scroll on the menu too, and now it scrolls properly. However, once the end is reached, it starts to scroll on the page. Have any idea why, and what to do? Thanks! – Anders Nov 23 '15 at 18:54
  • That's expected behavior. When you scroll, the event is bubbled up the DOM. The first element that catches the event handles it. When you scroll to the end of the menu, the menu no longer catches the scroll event, and it continues bubbling up. Any elements that are ancestors to the menu, in this case your page, catches the scroll event. Stopping this behavior seems tricky, check this link out. http://stackoverflow.com/questions/1459676/prevent-scroll-bubbling-from-element-to-window – Eric Guan Nov 23 '15 at 19:11
  • Thank you for the information! – Anders Nov 23 '15 at 19:19
  • - Fixed - by adding overflow:hidden to body, html when the sidebar menu is open. – Anders Nov 24 '15 at 10:09

0 Answers0