hlorand/fadein_onscroll.htm

## fadein_onscroll.htm
<html>
<head>
<style>
#container
{
    height:2000px;
}

#container div
{
    margin:50px;
    padding:50px;
    background-color:lightgreen;

    opacity: 1;
    transition: opacity 300ms linear;
}

#container div.hidden
{
    opacity:0;
}
</style>
</head>
<body>
<div id="container">

    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div class="hidden">Fade In</div>
    <div class="hidden">Fade In</div>
    <div class="hidden">Fade In</div>
    <div class="hidden">Fade In</div>
    <div class="hidden">Fade In</div>

</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
// Elmentem az ablak méretet
const windowHeight = window.innerHeight;

// Inicializálom a magasságértékeket, hogy ne kelljen minden scroll event-nél kiszámolni.
let hiddenElements = document.querySelectorAll('#container div.hidden');
if( hiddenElements != null ) hiddenElements.forEach(function(element) {
  	element.offsetBottom = element.offsetTop+element.offsetHeight;
    console.debug(element, '=>', element.offsetBottom);
});

document.addEventListener('scroll', function(event) {
	// Lekérem a görgetés pozicíóját
  let scrollTop = Math.max(document.documentElement.scrollTop,document.body.scrollTop);
  let scrollBottom = scrollTop+windowHeight;
  // Végigmegyek a még meglévő rejtett elemeken
  let hiddenElements = document.querySelectorAll('#container div.hidden');
  if( hiddenElements != null ) hiddenElements.forEach(function(element) {
      // Ha az elem megjeleníthető, akkor leveszem a class-t és a CSS animál külön szálon a görgetéstől
      if( element.offsetBottom <= scrollBottom ) element.classList.remove('hidden');
    });
},
// Hozzáadok egy plusz opciót amivel megmondom a böngészőnek, hogy nem fogom meghívni az event.preventDefault() metódust így nem kell megvárnia míg lefut a funkció
{'passive':true});
</script>
</body>
</html>
	<html>
	<head>
	<style>
	#container
	{
	height:2000px;
	}

	#container div
	{
	margin:50px;
	padding:50px;
	background-color:lightgreen;

	opacity: 1;
	transition: opacity 300ms linear;
	}

	#container div.hidden
	{
	opacity:0;
	}
	</style>
	</head>
	<body>
	<div id="container">

	<div>Hello</div>
	<div>Hello</div>
	<div>Hello</div>
	<div>Hello</div>
	<div>Hello</div>
	<div>Hello</div>
	<div class="hidden">Fade In</div>
	<div class="hidden">Fade In</div>
	<div class="hidden">Fade In</div>
	<div class="hidden">Fade In</div>
	<div class="hidden">Fade In</div>

	</div>
	<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script>
	// Elmentem az ablak méretet
	const windowHeight = window.innerHeight;

	// Inicializálom a magasságértékeket, hogy ne kelljen minden scroll event-nél kiszámolni.
	let hiddenElements = document.querySelectorAll('#container div.hidden');
	if( hiddenElements != null ) hiddenElements.forEach(function(element) {
	element.offsetBottom = element.offsetTop+element.offsetHeight;
	console.debug(element, '=>', element.offsetBottom);
	});

	document.addEventListener('scroll', function(event) {
	// Lekérem a görgetés pozicíóját
	let scrollTop = Math.max(document.documentElement.scrollTop,document.body.scrollTop);
	let scrollBottom = scrollTop+windowHeight;
	// Végigmegyek a még meglévő rejtett elemeken
	let hiddenElements = document.querySelectorAll('#container div.hidden');
	if( hiddenElements != null ) hiddenElements.forEach(function(element) {
	// Ha az elem megjeleníthető, akkor leveszem a class-t és a CSS animál külön szálon a görgetéstől
	if( element.offsetBottom <= scrollBottom ) element.classList.remove('hidden');
	});
	},
	// Hozzáadok egy plusz opciót amivel megmondom a böngészőnek, hogy nem fogom meghívni az event.preventDefault() metódust így nem kell megvárnia míg lefut a funkció
	{'passive':true});
	</script>
	</body>
	</html>