如何防止在子文件中滚动其父文件[副本]

This question already has an answer here:

这个问题已经有了答案:

Prevent BODY from scrolling when a modal is opened 37 answers
当一个模式打开37个答案时，防止主体滚动

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

我正在使用可滚动内容的弹出窗口(类似于Facebook的通知弹窗)。

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).

当前，当弹出窗口有焦点时，用户滚动它的内容滚动，直到到达底部，父窗口开始滚动(参见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!

我正试图防止当到达子节点的底部时，父节点滚动，如果可能的话，我希望只使用CSS。

2 个解决方案

#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.

如果您设置了overflow:隐藏在主体中，这将阻止它滚动。当然，当您关闭弹出窗口时，您将希望删除此属性。

#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

希望这有助于,干杯

#1