JSFiddle - React, Tailwind, and code Playground

by Noah Sloan

HTML

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

<!--
  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;
}

JavaScript 1.7

/** @jsx React.DOM */
var SimpleLog = React.createClass({    
  componentWillUpdate: function() {
    var node = this.getDOMNode();
    this.scrollHeight = node.scrollHeight;
    this.scrollTop = node.scrollTop;
    this.firstKey = this.refs.list.childNodes && this.refs.list.childNodes[0].key
  },

  componentDidUpdate: function() {

    var node = this.getDOMNode();
    node.scrollTop = this.scrollTop + (node.scrollHeight - this.scrollHeight);
      console.log(node.scrollTop, this.firstKey);
  },

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

  addEvent: function() {
    this.setState({
      items: [this.state.items.length]
        .concat(this.state.items)
    });
  },
  
  scrolled: function() {
      this.setState({
          scroll: this.getDOMNode().scrollTop
      });
  },
  
  shouldComponentUpdate: function() {
      var node = this.getDOMNode();
      return node.scrollTop < 200 || this.state.items.length < 100;
  },

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

  render: function() {
    var startIndex = this.firstKey ? this.state.items.indexOf(key) : 0;
    var start = this.scrollTop < 100 ? startIndex - 10: startIndex,
        end = Math.min(this.state.items.length, start + 100);
    return (
      <div class="container"  onScroll={this.scrolled}>
        <ul ref="list">
          {this.state.items.slice(start, end).map(function(item) {
            return <li key={item}>Event {item}</li>;
          })}
        </ul>
      </div>
    );
  }
});

/*
componentWillUpdate: function() {
  var node = this.getDOMNode();
  this.shouldScrollBottom = node.scrollTop + node.offsetHeight === node.scrollHeight;
},
 
componentDidUpdate: function() {
  if (this.shouldScrollBottom) {
    var node = this.getDOMNode();
    node.scrollTop = node.scrollHeight
  }
},
*/

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