piyushsinghania/app.js

## app.js
const list = document.getElementById('list');
const items = document.getElementsByClassName('item');

const generateElements = (lastItem) => {
  const number = +lastItem.innerHTML;
  const elements = [];

  for (let i = 1; i <= 9; i++) {
    const element = document.createElement('div');
    element.classList.add('item');
    element.innerHTML = number + i;
    elements.push(element);
  }

  return elements;
};

const isElementInScrollView = (el, parent) => {
  const rect = el.getBoundingClientRect();
  const parentRect = parent.getBoundingClientRect();

  return (
    rect.top >= parentRect.top &&
    rect.left >= parentRect.left &&
    rect.bottom <= parentRect.bottom &&
    rect.right <= parentRect.right
  );
};

list.addEventListener('scroll', () => {
  const lastItem = document.querySelector('.item:last-child');

  if (isElementInScrollView(lastItem, list)) {
    const newElements = generateElements(lastItem);
    list.append(...newElements);
  }
});

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Reverse Scroll</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="list">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>

    <script src="app.js"></script>
  </body>
</html>

## styles.css
#list {
  border: 1px solid black;
  background-color: antiquewhite;
  height: 250px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column-reverse;
}

.item {
  flex: 1;
  padding: 2em;
  border: 1px dashed green;
}
	const list = document.getElementById('list');
	const items = document.getElementsByClassName('item');

	const generateElements = (lastItem) => {
	const number = +lastItem.innerHTML;
	const elements = [];

	for (let i = 1; i <= 9; i++) {
	const element = document.createElement('div');
	element.classList.add('item');
	element.innerHTML = number + i;
	elements.push(element);
	}

	return elements;
	};

	const isElementInScrollView = (el, parent) => {
	const rect = el.getBoundingClientRect();
	const parentRect = parent.getBoundingClientRect();

	return (
	rect.top >= parentRect.top &&
	rect.left >= parentRect.left &&
	rect.bottom <= parentRect.bottom &&
	rect.right <= parentRect.right
	);
	};

	list.addEventListener('scroll', () => {
	const lastItem = document.querySelector('.item:last-child');

	if (isElementInScrollView(lastItem, list)) {
	const newElements = generateElements(lastItem);
	list.append(...newElements);
	}
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Reverse Scroll</title>
	<link rel="stylesheet" href="styles.css" />
	</head>
	<body>
	<div id="list">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	</div>

	<script src="app.js"></script>
	</body>
	</html>
	#list {
	border: 1px solid black;
	background-color: antiquewhite;
	height: 250px;
	overflow-y: scroll;
	display: flex;
	flex-direction: column-reverse;
	}

	.item {
	flex: 1;
	padding: 2em;
	border: 1px dashed green;
	}