Prevent body from scrolling when scrolling on fixed div

Question

How do I create a fixed div with overflow: scroll in such a way that body won't scroll when hovering over the div and scrolling? Sort of like the fixed chat boxes at the bottom of the window on facebook.com.

I've tried using javascript to capture and stop the scroll, wheel and touchmove events from bubbeling up with stopPropagation(), but it doesn't seem to work.

I've simplified the problem as much as I can here: https://jsfiddle.net/m9uamaza/

The goal is to scroll up and down in the fixed "bar" div without the "foo" body moving. If the "bar" div is scrolled all the way to the bottom, and I keep scrolling, I don't want the body to start scrolling. The body should still be scrollable when the mouse is not over the fixed div.

Sourabh Somani · Answer 1 · 2017-07-20T02:25:29.163

I have Updated your answer here is the link

https://jsfiddle.net/m9uamaza/3/

I have modified in following code

inner.addEventListener('wheel', function(e) {
if(e.wheelDelta < 0) {
  if((this.scrollHeight-this.scrollTop-200)<=0){
    e.preventDefault();
  }
     }
    else
    if(this.scrollTop==0){
       e.preventDefault();
    }
}, false);

Also providing Demo here, if you want like that

var inner = document.getElementById('inner'); 
var outer = document.getElementById('outer'); 

inner.addEventListener('scroll', function(e) {
  e.stopPropagation();
}, false);

inner.addEventListener('wheel', function(e) {
if(e.wheelDelta < 0) {
  if((this.scrollHeight-this.scrollTop-200)<=0){
    e.preventDefault();
  }
     }
    else
    if(this.scrollTop==0){
       e.preventDefault();
    }
}, false);

inner.addEventListener('touchmove', function(e) {
  e.stopPropagation();
}, false);

.fixed { 
  position: fixed; 
  top: 100px; 
  left: 100px; 
  background-color: #eef; 
  height: 200px; 
  width: 200px; 
  overflow-y: scroll; 
}

<body>
  <div id="outer"> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
    <p>foo</p> 
  <div class="fixed" id="inner"> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p> 
      <p>bar</p>  
    </div> 
  </div> 
</body>

I appreciate your help but this does not seem to solve the problem. If I scroll the "foo" body about halfway down, and then hover the mouse over the fixed "bar" div and scroll up, the "foo" body will scroll back up. Another quirk is if the bar div is scrolled all the way to the bottom, the user will not be able to scroll up again. I might not have expressed my problem clear enough. I'll try to edit my question and explain my problem better. — alvoha, Jul 19 '17 at 17:42
This time check it is working or not I have updated again. Hope you want like that — Sourabh Somani, Jul 20 '17 at 02:26

Prevent body from scrolling when scrolling on fixed div

1 Answers1