JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<!--
  We add new events at the beginning of a list but the scroll position doesn't jump. It stays where you are looking at.
-->

CSS

.container {
  height: 250px;
  overflow-y: scroll;
  background-color: #eee;
}

Babel + JSX

/** @jsx React.DOM */
var SimpleLog = React.createClass({    
  componentWillUpdate: function() {
    var node = this.getDOMNode();
    this.scrollHeight = node.scrollHeight;
    this.scrollTop = node.scrollTop;
  },

  componentDidUpdate: function() {
    var node = this.getDOMNode();
    node.scrollTop = this.scrollTop + (node.scrollHeight - this.scrollHeight);
  },

  getInitialState: function() {
    return { items: [] };
  },

  addEvent: function() {
    this.setState({
      items: ['Event ' + this.state.items.length]
        .concat(this.state.items)
    });
  },

  componentDidMount: function() {
    setInterval(this.addEvent, 300);
  },

  render: function() {
    return (
      <div class="container">
        <ul>
          {this.state.items.map(function(item) {
            return <li key={item}>{item}</li>;
          })}
        </ul>
      </div>
    );
  }
});


React.renderComponent(<SimpleLog />, document.body);