How to prevent scrolling in a child from scrolling its parent [duplicate]

Question

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!

Answer 1

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.

Answer 2

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