7

I'm working on a popover with scrollable content (similar to Facebook's notification popover).

Currently when the popover has focus and the user scrolls its content scrolls and all is well until the bottom is reached and the parent begins scrolling (see example of problem on CodePen).

I am trying to prevent the parent from scrolling when the bottom of the child is reached and would like to do so with just CSS if possible!

Warpling
  • 2,024
  • 2
  • 22
  • 38
  • i doubt its possible unless you set the background page height to the window height so it wont have where to scroll – Banana Apr 15 '14 at 18:29
  • This might help http://stackoverflow.com/questions/19706954/scrolling-of-a-child-div-should-not-scroll-parent-div?rq=1 – Smeegs Apr 15 '14 at 18:29
  • Thank you all. @leo that is very close, but I'm still curious if it is at all possible in pure CSS to avoid adding a `noscroll` with js. – Warpling Apr 15 '14 at 18:37

2 Answers2

5

If you set overflow: hidden in the body, that will prevent it from scrolling. Of course when you close the popup, you will want to remove this property.

Sam G-H
  • 627
  • 6
  • 17
  • 1
    That's a decent solution Sam, but I'd like the user to still be able to scroll the background content when it is hovered (Facebook and Pinterest's notification popovers both behave this way). That said `overflow: hidden` could be added/removed on hover. – Warpling Apr 15 '14 at 18:40
  • something like that would be perfect. – Sam G-H Apr 15 '14 at 18:48
3

To add to Sam's answer. Tell it what you want on the fly -- example;

    <div class="hover-content" 
         onmouseover="document.body.style.overflow='hidden';"           
         onmouseout="document.body.style.overflow='auto';">
blah yay I'm fixed
</div>

Hope this helps, cheers

Chris W.
  • 22,835
  • 3
  • 60
  • 94
  • Chris, I really like this implementation. I'm still curious if it's possible with just CSS, but if not I think this would be my solution of choice. – Warpling Apr 15 '14 at 18:47
  • I don't believe so simply for how the bubbling up of the scroll event is handled....but I've been wrong before. – Chris W. Apr 15 '14 at 18:53