Scroll only in notification div like facebook, not in body

Question

I want to design notification like facebook. In facebook I see scroll in notification dropdown, but not scroll in body. Here is my screenshot of notification.

When i scroll in notification, body also move up and down. how can i stop this? Please see my working fiddle When i scroll in red area my hole body will scroll. but i want that, When i scroll in red area, then body will not scroll.

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

That's a good goal, what have you done to implement it? Stackoverflow is for asking questions about specific problems you are facing in your own code. Create [mcve] of the problem you are facing. — Esko, Jun 30 '17 at 06:26
so do you want to disable body scroll when user scrolling in the notification box right ? — Ismail Farooq, Jun 30 '17 at 07:04
I got my answer @IsmailFarooq Please check in answer list Thank you — Awesome Designer, Jun 30 '17 at 07:09

score 2 · Answer 1 · answered Jun 30 '17 at 06:26

2

To get your notifications to scroll, you need to add overflow-y: scroll to your notifications element.

There are ways to stop the body from scrolling whenever this dropdown is open, but that seems like a terrible idea.

answered Jun 30 '17 at 06:26

Kris Selbekk

7,438
7
46
73

Sahan Serasinghe · Answer 2 · 2017-06-30T06:39:16.950

1

You can use the overflow-y: scroll in CSS

Here's a working sample of what you are expecting to implement

JSFiddle Demo

Hope this helps :)

PS - Don't use inline CSS in your production code though. It's just for demonstration purposes only

edited Jun 30 '17 at 06:39

answered Jun 30 '17 at 06:29

Sahan Serasinghe

1,591
20
33

score 1 · Answer 3 · answered Jun 30 '17 at 07:09

1

I got my answer please check below code

$('.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

answered Jun 30 '17 at 07:09

Awesome Designer

254
1
14

lol i was just posting this answer https://stackoverflow.com/a/7600806/2724173 but my PM had come :D – Ismail Farooq Jun 30 '17 at 07:44
LOL :D :D bad luck. better luck next time. BTW thank you – Awesome Designer Jun 30 '17 at 08:27

Scroll only in notification div like facebook, not in body

3 Answers3