javascript - 像 facebook 一样只在通知 div 中滚动，而不是在 body 中滚动

Question

我想像 facebook 一样设计通知。在 facebook 中，我在通知下拉列表中看到滚动，但在正文中没有滚动。这是我的通知截图。

当我在通知中滚动时，主体也会上下移动。我怎么能阻止这个？ 请看我的工作 fiddle 当我在红色区域滚动时，我的洞体会滚动。但我想要的是，当我在红色区域滚动时，正文将不会滚动。

<div style="width: 200px; height: 100px; overflow-y: scroll;background-color:red;">
  test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br />
</div>
<div>
  test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br />
</div>
<div>
  test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br />
</div>
<div>
  test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br />
</div>
<div>
  test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br /> test
  <br />
</div>

Answer 1

要让您的通知滚动，您需要将 overflow-y: scroll 添加到您的通知元素。

只要这个下拉菜单打开，就有办法阻止正文滚动，但这似乎是个糟糕的主意。