React: scrollIntoView

index.html

<div id="list"></div>

react-scrollintoview.markdown

React: scrollIntoView

A Pen by Hirokazu Takatama on CodePen.

License.

script.babel

var items = [];
for (var i = 0; i < 100; i++) {
  items.push(i);
}

var List = React.createClass({
  getInitialState: function() {
    return {index: 0};
  },
  handleShow: function(i) {
    this.setState({index: i});
    this.refs[i].scrollIntoView({block: 'end', behavior: 'smooth'});
  },
  render: function() {
    return(
      <div>
        <ul>{items.map(function(item, i) {return <li ref={i}>{item}</li>})}</ul>
        <button onClick={this.handleShow.bind(this, 0)}>0</button>
        <button onClick={this.handleShow.bind(this, 50)}>50</button>
        <button onClick={this.handleShow.bind(this, 99)}>99</button>
        {this.state.index}
      </div>
    );
  }
});

React.render(<List />, document.getElementById('list'));

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>

style.css

#list ul {
  overflow: auto;
  height: 128px;
}