JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

// Here is the simplest possible mixin to get a global scroll event
var SimplePageScrollMixin = {
    componentDidMount: function() {
        window.addEventListener('scroll', this.onScroll, false);
    },
    componentWillUnmount: function() {
        window.removeEventListener('scroll', this.onScroll, false);
    }
};

// However, usually what we want is to detect when the user starts and
// stops scrolling. Here's a way to do it.

// If we don't get a scroll event within 200 ms, assume the user
// stopped scrolling.
var SCROLL_TIMEOUT = 200;

// How often to check if we're scrolling; this is a reasonable default.
var CHECK_INTERVAL = SCROLL_TIMEOUT / 2;

var PageScrollStartEndMixin = {
    mixins: [SimplePageScrollMixin],
    componentDidMount: function() {
        this.checkInterval = setInterval(this.checkScroll, CHECK_INTERVAL);
        this.scrolling = false;
    },
    componentWillUnmount: function() {
        clearInterval(this.checkInterval);
    },
    checkScroll: React.autoBind(function() {
        if (Date.now() - this.lastScrollTime > SCROLL_TIMEOUT && this.scrolling) {
            this.scrolling = false;
            this.onScrollEnd();
        }
    }),
    onScroll: React.autoBind(function() {
        if (!this.scrolling) {
            this.scrolling = true;
            this.onScrollStart();
        }
        this.lastScrollTime = Date.now();
    })
};

// Example of PageScrollStartEndMixin
var Hello = React.createClass({
    mixins: [PageScrollStartEndMixin],
    getInitialState: function() {
        return {scrolling: false};
    },
    onScrollStart: function() {
        this.setState({scrolling: true});
    },
    onScrollEnd: function() {
        this.setState({scrolling: false});
    },
    render: function() {
        return <div style={{lineHeight: 500, height: 1000}}>Hello {this.props.name}! Scrolling? {this.state.scrolling ? 'yes' : 'no'}</div>;
    }
});
 
React.renderComponent(<Hello name="World" />,...