Menu
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.
638
Approach: A simple solution to this problem is to set the value of the “overflow” property of the body element to “hidden” whenever the modal is opened, which disables the scroll on the selected element.
To hide the scrollbar and disable scrolling, we can use the CSS overflow property. This property determines what to do with content that extends beyond the boundaries of its container. To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element.
The difference For that, you need overflow: auto , which lets a browser automatically determine if a scroll bar is needed — or not. So in short: overflow: scroll : Always show a scroll bar. overflow: auto : Show a scroll bar when needed.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
