Ad

React JS: OnWheel Bubbling StopPropagation Not Working

- 1 answer

TL;DR:

See my jsfiddle link where scrolling child div up till bottom/top should not start scrolling parent. I tried using e.stopPropagation() which didn't work. So need solution (without using mixins).

My Code:

http://jsfiddle.net/vmvrphjn/

//////////HTML CODE
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

////////CSS CODE    
.childScroll{
  max-height: 200px;
  overflow-y: scroll;
  background-color: white;
  max-width: 200px;
  margin: 0 auto;
  border: 1px solid blue
}

.parentScroll {
  text-align: center;
  max-height: 300px;
  overflow-y: scroll;
  background-color: lightgreen;
  padding: 10px;
}

////////JS CODE 
class Hello extends React.Component {
  render() {

    return (
    <div className='parentScroll'>
          Scrollable Parent: <br /><br />
        <div className='childScroll' onWheel = {(e)=>{console.log('Scrolling Me..'); e.stopPropagation();}}>
      Scroll CHILD LIST:1 <br /><br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        Some text blah<br />
        </div>
    <div className='childScroll' onWheel = {(e)=>{console.log('Parent got scroll event');}}>
      Scroll CHILD LIST:2 <br /><br />
        Hi text blah<br />
        Hi text blah<br />
        Hi text blah<br />
        Hi text blah<br />
        Hi text blah<br />
        Hi text blah<br />
        Hi text blah<br />
        Hi text blah<br />
        Hi text blah<br />
        Hi text blah<br />
    </div>
  </div>
);
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

My Target:

I am having a div which scrolls. But on coming to the top or the bottom after the scrolling the div, the scrolling starts happening on the entire page itself which I don't want. I think it's happening due to event propagation, so I am trying to stop in following manner.

My Implementation:

I am using "extends Component (es6 way)" to create my components. And I've put onWheel event listener as

It's consoling out 'Scrolling Me' fine but I am not able to stop propagating this event to the parent. Not sure why stopPropagation is not happening exactly or whether this issue is happening because of propagation

I don't want to use libraries which used mixins, so please don't suggest me this way.

Ad

Answer

I resolved the issue using following ways.

EARLIER SOLUTION:

const rdom = require('react-dom');  

<div onMouseOver={() => {
      const ele = rdom.findDOMNode(this);
      if (ele.scrollTop === 0 && ele.scrollHeight === ele.clientHeight) {
           return;
         } else {
           document.body.style.overflow = 'hidden';
         }
     }}
     onMouseOut={() => {
      document.body.style.overflow = 'auto';
     }}
</div>

NEW SOLUTION: (Since Mac and Linux operates scroll bars differently than windows, the above solution is annoying as it removes and add scroll bar to the document thus reducing/increasing its width which can shake other elements)

handleScroll(e) {

const ele = rdom.findDOMNode(this);

if (e.nativeEvent.deltaY <= 0) {
  /* scrolling up */
  if(ele.scrollTop <= 0) {e.preventDefault();}
} 
else
{
  /* scrolling down */
  if(ele.scrollTop + ele.clientHeight >= ele.scrollHeight) {
    e.preventDefault();
  }
}


/*Look question for the placement of below CODE*/
onWheel={(e) => {this.handleScroll(e);}}

ANOTHER SOLUTION:

You can also find the if document/window/body has been scrolled uptil your scrollable div. And then make this scrollable div as position: fixed. Fixed property automatically doesn't let the document/window/body get that onWheel event.

Ad
source: stackoverflow.com
Ad