Prevent nested scrollbar from scrolling document
See original GitHub issueFirst, thank you very much for writing this component. I’ve tried many different custom scrollbar components but this is the first one that I literally just dropped into my code and it worked flawlessly. Plus the default styling happens to be exactly what I was going for. Saved me tons of time and is definitely appreciated.
One thing that I’m trying to do is prevent scrolling on a div from causing the entire document to scroll when you get to the top or bottom of the div. I thought I could cancel the scroll event from the onScroll
handler but it doesn’t seem to work. I looked at the code and it’s not clear to me why it wouldn’t.
Here’s my code:
handleScroll(e, values) {
if (values.top === 0 || values.top === 1) {
e.stopImmediatePropagation();
e.preventDefault();
e.returnValue = false;
return false;
}
}
render() {
let { children } = this.props;
let scrollerStyle = {height: 400px, width: 'auto'};
return (
<Scrollbars
style={scrollerStyle}
onScroll={this.handleScroll.bind(this)}>
{children}
</Scrollbars>
);
}
Issue Analytics
- State:
- Created 8 years ago
- Reactions:4
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Hide scroll bar of nested div, but still make it scrollable
I basicly add padding:0 1em 1em 0; to the element where it is supposed to be hidden , this hides both scrollbars if...
Read more >How to prevent overflow scrolling in CSS - LogRocket Blog
The scroll value of the overflow property adds horizontal and vertical scroll bars so you can adjust or scroll the content if it's...
Read more >overscroll-behavior - CSS: Cascading Style Sheets | MDN
The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area.
Read more >Avoid multiple nested scrollbars : r/Angular2 - Reddit
I have a typical web app using angular material. App component has Header, router outlet, footer Mat sidenav content has router outlet and ......
Read more >How to fight the <body> scroll. First of all - Medium
overflow:hidden will remove the scrollbars (they are hidden), and block the scroll, as long this overflow mode is not scrollable. This is how...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
the above code is not working, this code will work
@mrwnmonm it’s method doesn’t work on mobile( why?