仅在 facebook 等通知 div 中滚动，而不在正文中滚动

Question

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

当我滚动通知时，身体也会上下移动。我怎么能阻止这个？ 请看我的工作小提琴 当我在红色区域滚动时，我的孔体将滚动。但我想要那个，当我在红色区域滚动时，身体不会滚动。

<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 添加到通知元素。

有一些方法可以在此下拉菜单打开时阻止正文滚动，但这似乎是一个糟糕的主意。

Answer 2

您可以在 CSS 中使用overflow-y: scroll

这是您期望实现的工作示例

JSFiddle Demo

希望这会有所帮助:)

PS - 不要在生产代码中使用内联 CSS。这只是为了演示目的

Answer 3

我得到了答案，请检查下面的代码

$('.noscroll').on( 'mousewheel DOMMouseScroll', function (e) { 

  var e0 = e.originalEvent;
  var delta = e0.wheelDelta || -e0.detail;

  this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
  e.preventDefault();  
});

JS fiddle