question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Prevent nested scrollbar from scrolling document

See original GitHub issue

First, 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:closed
  • Created 8 years ago
  • Reactions:4
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

8reactions
marwan-nwhcommented, Dec 15, 2015

the above code is not working, this code will work

  handleScroll(e, values) {
   var scrollarea = this.refs.container.parentNode;
      var dir =  (e.detail<0) ? 1 : (e.wheelDelta>0) ? 1 : -1;
      if ((dir == 1 && scrollarea.scrollTop == 0) || (dir == -1 && scrollarea.scrollTop == scrollarea.scrollHeight-scrollarea.clientHeight)){
        e.preventDefault();
      }
  }

  componentDidMount() {
    this.refs.container.parentNode.addEventListener('scroll', this.handleScroll);
    this.refs.container.parentNode.addEventListener('wheel', this.handleScroll);
  }

  componentWillUnmount(){
    this.refs.container.parentNode.removeEventListener('scroll', this.handleScroll);
    this.refs.container.parentNode.removeEventListener('wheel', this.handleScroll);
  }
  render() {
    return (
         <Scrollbars>
             <div ref="container">
             </div>
         </Scrollbars>
    );
  }
0reactions
romanlexcommented, Dec 28, 2018

@mrwnmonm it’s method doesn’t work on mobile( why?

Read more comments on GitHub >

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

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found