React Horizontal Scrolling

HTML

<body id="main"></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react-with-addons.js"></script>

CSS

/* animation */
 .fall-enter {
    transform: translate(0, -100%);
    transform: translate3d(0, -100%, 0);
}
.fall-enter.fall-enter-active {
    transform: translate(0, 0);
    transform: translate3d(0, 0, 0);
    transition: transform 1s ease-out;
}
.fall-leave {
    index: -1;
    transform: translate(0, 0);
    transform: translate3d(0, 0, 0);
    transition: transform 1s ease-in;
}
.fall-leave.fall-leave-active {
    transform: translate(0, 100%);
    transform: translate3d(0, 100%, 0);
}
/* other */
 * {
    box-sizing: border-box;
}
.pagelink {
    padding: 5px;
    margin: 5px 0px;
    width: 100%;
}
.pages {
    display: flex;
    flex-flow:row;
    overflow-x: scroll;
    overflow-y: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ddd;
}
.pages:after {
    flex: none;
    -webkit-flex: none;
    display: block;
    content:" ";
    width: 100px;
}
.page {
    flex: none;
    -webkit-flex: none;
    margin: 8px;
    padding: 10px 31px;
    background: #fff;
    overflow: auto;
    box-shadow: 2px 1px 4px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
.main{
  overflow:auto
}

JavaScript

function generateId() {
    var r = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    for (var i = 0; i < 10; i += 1) {
        r += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return r;
}

var PageList = {
    pages: [],
    listener: function (newpages) {},
    open: function (caption, index) {
        if (index != null) {
            this.pages = this.pages.slice(0, index + 1);
        }
        this.pages.push({
            id: generateId(),
            caption: caption,
            width: (150 + Math.random() * 50) | 0
        });
        this.listener(this.pages);
    }
};
PageList.open("Main");

var PageLink = React.createClass({
    render: function () {
        var self = this;
        return React.DOM.button({
            className: "pagelink",
            onClick: function () {
                PageList.open(self.props.caption, self.props.pageIndex);
            }
        }, self.props.caption);
    }
});

var Page = React.createClass({
    render: function () {
        return React.DOM.article({
            className: "page",
            style: {
                width: this.props.page.width + "px"
            }
        },
        React.DOM.h1({}, this.props.page.caption),
        React.createElement(PageLink, {
            caption: "Alpha",
            pageIndex: this.props.index
        }),
        React.createElement(PageLink, {
            caption: "Beta",
            pageIndex: this.props.index
        }),
        React.createElement(PageLink, {
            caption: "Gamma",
            pageIndex: this.props.index
        }));
    }
});

var Pages = React.createClass({
    componentDidMount: function () {
        var self = this;
        PageList.listener = function (pages) {
            self.setState({
                pages: pages
            });
        };
    },
    getInitialState: function () {
        return {
            pages: PageList.pages
        };
    },
    render:...