在固定div上滚动时防止身体滚动

Question

如何overflow: scroll以这样的方式创建一个固定的div,body当鼠标悬停在div上并滚动时不会滚动？有点像facebook.com上窗口底部的固定聊天框.

我已经尝试使用javascript来捕获和停止scroll,wheel并且touchmove事件从冒泡起来stopPropagation(),但它似乎不起作用.

我尽可能地简化了这个问题:https://jsfiddle.net/m9uamaza/

目标是在固定的"bar"div中向上和向下滚动而不使"foo"体移动.如果"bar"div一直滚动到底部,并且我继续滚动,我不希望身体开始滚动.当鼠标不在固定div上时,正文仍应可滚动.

Answer 1

我已经更新了您的答案，这是链接

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

我修改了以下代码

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('wheel', function(e) {
if(e.wheelDelta < 0) {
  if((this.scrollHeight-this.scrollTop-200)<=0){
    e.preventDefault();
  }
     }
    else
    if(this.scrollTop==0){
       e.preventDefault();
    }
}, false);

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