标签 javascript html css
<分区>
如何使用 overflow: scroll 创建一个固定的 div，使 body 在悬停在 div 上并滚动时不会滚动？有点像 facebook.com 上窗口底部固定的聊天框。
我尝试使用 javascript 捕获并阻止 scroll、wheel 和 touchmove 事件与 stopPropagation( )，但它似乎不起作用。
我在这里尽可能地简化了问题:https://jsfiddle.net/m9uamaza/
目标是在“foo”主体不移动的情况下在固定的“bar”div 中上下滚动。如果“栏”div 一直滚动到底部，并且我一直滚动，我不希望正文开始滚动。当鼠标不在固定的 div 上时，主体仍应可滚动。
最佳答案
我已经在这里更新了你的答案是链接
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);
这里也提供Demo，如果你想要的话
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>关于javascript - 在固定 div 上滚动时防止正文滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45178135/