React Base Fiddle (JSX)
Starting point for creating JSFiddles with React. This uses React with Addons.
HTML
<script src="http://www.jimsproch.com/react/babel-browser.js"></script>
<script src="http://www.jimsproch.com/react/future/react.js"></script>
<script src="http://www.jimsproch.com/react/future/react-dom.js"></script>
<script src="http://www.jimsproch.com/react/future/react-dom-server.js"></script>
<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
.childScroll{
max-height: 200px;
overflow-y: scroll;
background-color: white;
max-width: 200px;
margin: 0 auto;
border: 1px solid blue
}
.parentScroll {
max-height: 300px;
overflow-y: scroll;
background-color: lightgreen;
padding: 10px;
}
JavaScript 1.7
class Hello extends React.Component {
render() {
return (
<div className='parentScroll'>
<div className='childScroll' onWheel = {(e)=>{console.log('Scrolling Me..'); e.stopPropagation();}}>
Scroll 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 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')
);