Prevent body scrolling when scrolling over a fixed div
How to create a fixed div with overflow: scroll
such that it body
doesn't scroll when hovering over the div and scrolling? It looks like the fixed chat fields at the bottom of the window on facebook.com.
I tried using javascript to capture and stop events scroll
, wheel
and touchmove
bubble up using stopPropagation()
, but it doesn't 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 div "bar" without moving the body of "foo". If the "bar" div scrolls to the end and I keep scrolling, I don't want the body to start scrolling. The body should remain scrollable unless the mouse is over the fixed div.
source to share
I have updated your answer, here is the link
https://jsfiddle.net/m9uamaza/3/
I have changed in the 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 a Demo here if you so desire
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>
source to share
You don't need Javascript for this, just this CSS:
.inner {
position: fixed;
top: 100px;
left: 100px;
background-color: #eef;
height: 200px;
width: 200px;
overflow-y: scroll;
}
see here: https://jsfiddle.net/eaw76th1/2/ (edited: updated, wrong version was saved)
source to share