linfongi/infinite.html

## infinite.html
<!DOCTYPE html>
<html>
  <head>
    <style media="screen">
      html {
        height: 100%;
        width: 100%;
      }

      body {
        height: 100%;
        width: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
      }

      #content {
        background-color: cyan;
      }

    </style>
    <meta charset="utf-8">
    <title>Height</title>
  </head>
  <body>
    <div id="content">
      <button type="button" onclick="showHeights()">Show Heights</button>
    </div>
    <script type="text/javascript">

      var initHeight = 500;
      $content = document.getElementById('content');
      $content.style.height = initHeight + 'px';

      window.addEventListener('scroll', function(e) {
        // console.log('scrollHeight', document.body.scrollHeight);
        // console.log('scrollTop', document.body.scrollTop);
        // console.log('clientHeight', document.body.clientHeight);

        if (document.body.scrollTop + document.body.clientHeight === document.body.scrollHeight) {
          console.log('Should load more');
          http();
        }
      });

      var isLoading = false;
      function http() {
        if (isLoading === true) {
          console.log('Still loading');
          return;
        }
        console.log('I will load more');
        isLoading = true;
        setTimeout(() => {
          isLoading = false;
          initHeight += 250;
          $content.style.height = initHeight + 'px';
        }, 2000);
      }

      function showHeights() {
        console.log(document.body.scrollHeight);
        console.log(document.body.clientHeight);
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style media="screen">
	html {
	height: 100%;
	width: 100%;
	}

	body {
	height: 100%;
	width: 100%;
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
	}

	#content {
	background-color: cyan;
	}

	</style>
	<meta charset="utf-8">
	<title>Height</title>
	</head>
	<body>
	<div id="content">
	<button type="button" onclick="showHeights()">Show Heights</button>
	</div>
	<script type="text/javascript">

	var initHeight = 500;
	$content = document.getElementById('content');
	$content.style.height = initHeight + 'px';

	window.addEventListener('scroll', function(e) {
	// console.log('scrollHeight', document.body.scrollHeight);
	// console.log('scrollTop', document.body.scrollTop);
	// console.log('clientHeight', document.body.clientHeight);

	if (document.body.scrollTop + document.body.clientHeight === document.body.scrollHeight) {
	console.log('Should load more');
	http();
	}
	});

	var isLoading = false;
	function http() {
	if (isLoading === true) {
	console.log('Still loading');
	return;
	}
	console.log('I will load more');
	isLoading = true;
	setTimeout(() => {
	isLoading = false;
	initHeight += 250;
	$content.style.height = initHeight + 'px';
	}, 2000);
	}

	function showHeights() {
	console.log(document.body.scrollHeight);
	console.log(document.body.clientHeight);
	}
	</script>
	</body>
	</html>