设计师要求首页轮播图加上滚动监听,撸完代码揪出来个demo。
const rdom = require('react-dom');
class Hello extends React.Component {
render() {
handleScroll(e) {
const ele = rdom.findDOMNode(this);
if (e.nativeEvent.deltaY <= 0) {
/* scrolling up */
if(ele.scrollTop <= 0) {
e.preventDefault();
console.log(scrolling up)
}
}
else
{
/* scrolling down */
if(ele.scrollTop + ele.clientHeight >= ele.scrollHeight) {
e.preventDefault();
console.log(scrolling down)
}
}
}
return (
<div className='parentScroll' onWheel={(e) => this.handleScroll(e)}>
<div className='childScroll'>
Some text blah
</div>
<div className='childScroll'>
Hi text blah
</div>
</div>
);
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);