examples/dynamic-height.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Hyper List Demo</title>

  <style>
    body, html {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      min-height: 100%;
      min-width: 100%;
      text-align: center;
    }
    body {
      overflow: hidden;
    }

    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
      .container {
        width: 100%;
        height: 100%;
        min-height: 100%;
      }
    }

    .vrow {
      width: 100%;
      color: #000;
      margin: 0;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .vrow p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0;
      color: #5b5b5b;
    }
  </style>
</head>
<body>

<script type="text/javascript" src="../dist/hyperlist.js"></script>
<script>
  var container = document.createElement('div');
  var config = {
    height: window.innerHeight,
    itemHeight: 50,
    total: 1000,
    // Set to true to put into 'chat mode'.
    reverse: false,
    scrollerTagName: 'div',

    generate(row) {
      var newHeight = Math.floor(Math.random() * 50) + 50;
      var el = Object.assign(document.createElement('div'), {
        innerHTML: `<p>ITEM ${row}</p>`,
      });

      return {element: el, height: newHeight};
    }
  };

  var list = HyperList.create(container, config);

  window.onresize = e => {
    config.height = window.innerHeight;
    list.refresh(container, config);
  };

  container.classList.add('container');

  document.body.appendChild(container)
</script>
</body>
</html>