Double Scrolling Bar

[lucmerceron]

Good morning,

I'm pretty surprised to find a bug of this kind.
Perhaps i'm doing something wrong.

With the following code as example, if i scroll within the second scrollbar, the first one will scroll too.

<ScrollBar
  speed={0.8}
  style={{height: '400px'}}
  horizontal={false}
  smoothScrolling= {true}
  minScrollSize={40}>
  <div style={{height: '800px', padding: '40px', border: '1px solid grey'}}>
    <ScrollBar
      speed={0.8}
      style={{height: '200px'}}
      horizontal={false}
      smoothScrolling= {true}
      minScrollSize={40}>
        <div style={{height: '400px', padding: '40px', border: '1px solid,pink'backgroundColor: '#C2BFBF', color: 'white'}}>
      </div>
    </ScrollBar>
  </div>
</ScrollBar>

You can see the problem in this small video-clip : https://vid.me/qNTm

Thank for the answer,
Luc

[souhe]

Hi,

That's interesting. Your code looks good and I think it might be a bug. I've never thought about nested ScrollAreas.

I'll try to fix that :)

[pterenin]

Caught this bug too. One option to fix it is to add event to onScrooll method. That way you could do event.preventDefault() when you scroll child element.

[wttubes]

I agree with @pterenin i was searching for event in onScroll method and couldn't find it.
I used jquery, on the inner scrollable div, in the componentDidMount method:

  ```
  let overflowDiv = $(".overflow");

  overflowDiv.on("mousewheel", function (e) {
      e.stopPropagation();
  });

[souhe]

It's fixed thanks to @vsubbotskyy