2021-10-02 Infinite Scroll

by Ttt Yyy

HTML

<!DOCTYPE HTML> 
<head/> 
<body>
  <div id='container' />
</body>

<!-- row to look like: 
<div class="row">
 <img src="..." class='profile'>
 <span class="label">Name</span>
</div> -->

CSS

#container {
  height: 100px;
  overflow: auto;
  position: relative;
}

.row {
  display: flex;
  align-items: center;
  position: absolute;
}

.rowImage {
  height: 50px;
  width: 50px;
}

.label {
  margin-left: 10px;
}

/* .row {
  display: flex;
  align-items: center;
}

.rowImage {
  height: 50px;
  width: 50px;
}

.label {
  margin-left: 10px;
} */

JavaScript

const container = document.getElementById('container');
let topPosition = 0;

const addRow = (url, label, index, container) => {

	const row = document.createElement('div');
	row.className = 'row';
  row.innerHTML = `<img src=${url} class='rowImage'>
 <span class="label">${label}</span>`
 row.style.top = `${topPosition}px`;
 
 const children = container.childNodes
 if(index < children.length || index != null) {
 console.log('2')
	 container.insertBefore(row, children[index]);
 } else {
 console.log('1')
 	container.appendChild(row);
 }
   topPosition += 50;
}

addRow('https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/moltres.png', 'Moltres', null, container)

addRow('https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/zapdos.png', 'Zapdos', null, container)

addRow('https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/articuno.png', 'Articuno', null, container)