rssilva/plain-html-with-removelistener.html

## plain-html-with-removelistener.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style media="screen">
  .scrolling-indicator {
position: fixed;
top: 0;
right: 0;
background-color: red;
padding: 1em;
color: white;
opacity: 0;
transition: opacity 1s;
}

.scrolling-indicator::after {
content: 'scrolling'
}

.scrolling-indicator.active {
opacity: 1;
transition: none;
}

button {
position: fixed;
top: 0;
left: 0;
padding: 1em;
background-color: green;
color: white;
border: none;
font-size: inherit;
font-family: inherit;
}
  </style>
</head>
<body>

</body>
<script type="text/javascript">
let html = `
<div class='scrolling-indicator'></div>
<button>remove event listener</button>
`;

for ( let i = 0; i < 999; i += 1 ) {
html += `<p>${i}</p>`;
}

document.body.innerHTML = html;

let indicator = document.createElement( 'div' );
indicator.classList.add( 'scrolling-indicator' );
document.body.appendChild( indicator );

let timeout = null;

function onscroll () {
clearTimeout( timeout );
indicator.classList.add( 'active' );

timeout = setTimeout( () => {
  indicator.classList.remove( 'active' );
}, 100 );
}

window.addEventListener( 'scroll', onscroll, {
  passive: true
});

document.querySelector( 'button' ).addEventListener( 'click', () => {
  window.removeEventListener( 'scroll', onscroll, {
    passive: true
  });
  alert( 'event listener should have been removed' );
});
</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style media="screen">
	.scrolling-indicator {
	position: fixed;
	top: 0;
	right: 0;
	background-color: red;
	padding: 1em;
	color: white;
	opacity: 0;
	transition: opacity 1s;
	}

	.scrolling-indicator::after {
	content: 'scrolling'
	}

	.scrolling-indicator.active {
	opacity: 1;
	transition: none;
	}

	button {
	position: fixed;
	top: 0;
	left: 0;
	padding: 1em;
	background-color: green;
	color: white;
	border: none;
	font-size: inherit;
	font-family: inherit;
	}
	</style>
	</head>
	<body>

	</body>
	<script type="text/javascript">
	let html = `
	<div class='scrolling-indicator'></div>
	<button>remove event listener</button>
	`;

	for ( let i = 0; i < 999; i += 1 ) {
	html += `<p>${i}</p>`;
	}

	document.body.innerHTML = html;

	let indicator = document.createElement( 'div' );
	indicator.classList.add( 'scrolling-indicator' );
	document.body.appendChild( indicator );

	let timeout = null;

	function onscroll () {
	clearTimeout( timeout );
	indicator.classList.add( 'active' );

	timeout = setTimeout( () => {
	indicator.classList.remove( 'active' );
	}, 100 );
	}

	window.addEventListener( 'scroll', onscroll, {
	passive: true
	});

	document.querySelector( 'button' ).addEventListener( 'click', () => {
	window.removeEventListener( 'scroll', onscroll, {
	passive: true
	});
	alert( 'event listener should have been removed' );
	});
	</script>
	</html>