React

by valkyris

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.scroll-container {
  height: 300px;
  overflow: scroll;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

React

const _getCatImg = () => {
  const randomNum = () => {
    return Math.floor(Math.random() * 100000);
  };
  const url = "https://source.unsplash.com/collection/139386/200x200/?sig=";
  return url + randomNum();
}

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: Array(10).fill({})
    };
    
    this.topSentinelPreviousY = 0;
    this.topSentinelPreviousRatio = 0;
    this.bottomSentinelPreviousY = 0;
    this.bottomSentinelPreviousRatio = 0;
  }
  
  componentDidMount() {
  	this._setupIntersectionObs();
  }
  
  _setupIntersectionObs() {
  	const options = {
      root: document.querySelector('.scroll-container'),
      rootMargin: '0px',
      threshold: 1.0
    }
    
    const callback = entries => {
    	entries.forEach(entry => {
      	console.log('what is entry', entry);

      });
    }

    var observer = new IntersectionObserver(callback, options);
    observer.observe(document.querySelector("#top-sentinel"));
    observer.observe(document.querySelector("#bottom-sentinel"));
  }
  
  render() {
    return (
      <div id="main">
        <h2>Scroll block:</h2>
        <div className="scroll-container">
          <ul>
          <div id="top-sentinel" />
          {this.state.items.map((item, index) => (
            <li id={`scroll-item-${index}`} key={index}>
              <Tile index={index} />
            </li>
          ))}
          <div id="bottom-sentinel" />
          </ul>
        </div>
      </div>
    )
  }
}

const Tile = props => (
	<div>
	  <div>Hello Catzilla: {props.index}</div>
	  <img src={_getCatImg()} />
	</div>
);

ReactDOM.render(<TodoApp />, document.querySelector("#app"))