Question

如何使用overflow: scroll创建一个固定div，以便{h}翻转div并滚动时body不会滚动？有点像facebook.com上窗口底部的固定聊天框。

我已经尝试使用javascript捕获并阻止scroll，wheel和touchmove事件与stopPropagation()一起发布，但它没有＆＃39;似乎工作。

我已经尽可能地简化了问题：https://jsfiddle.net/m9uamaza/

目标是在固定的＆＃34;栏中向上和向下滚动＆＃34; div没有＆＃34; foo＆＃34;身体移动。如果＆＃34; bar＆＃34; div一直滚动到底部，我继续滚动，我不想让身体开始滚动。当鼠标不在固定的div上时，正文仍然可以滚动。

Answer 1

我在这里更新了您的答案是链接

我修改了以下代码

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

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

Answer 2

你不需要任何Javascript，只需要这个CSS：

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

请参阅此处：https://jsfiddle.net/eaw76th1/2/（编辑：已更新，已保存错误的版本）

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

2 个答案: