nfreear · May 17, 2022 18:27
diff --git a/infinite-content-scroll-trap.js.html b/infinite-content-scroll-trap.js.html
 <!doctype html> <title> Infinite content trap </title>

 <style>
 body { margin: 1rem auto; max-width: 35rem; }

 button,
 [ role *= button ] {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 1px solid #ccc;
  color: #222;
  display: inline-block;
  font-size: inherit;
  padding: .6rem 4rem;
  text-decoration: none;
 }

 main p {
  line-height: 2;
  margin: 2.5rem 0;
 }

 .gt-0 main p {
  line-height: 1.5;
  margin: 1.5rem 0;
 }

 .X_main {
  transition: all 2s;
  max-height: 20rem;
 }

 .X_ev main {
  max-height: 100rem;
 }
 </style>


 <h1> Infinite content trap </h1>

 <p><a href="?scroll=1">With scroll</a> | <a href="?scroll=0">No scroll</a>.</p>

 <main>
  <p> A line of text &hellip; </p>
  
 </main>

 <p><a role="button" href="#_Add_more_button" >Add more</a></p>

 <p><a href="#_End"> Can you reach the end? </a></p>


 <script type="module">
 // NDF, 17-May-2022.

 const HOLDER = document.querySelector('main');
 const BUTTON = document.querySelector('a[ href *= _Add_more_button ]');
 const DO_SCROLL = /scroll=1/.test(window.location.href);

 let count = 0;

 // Initialize.
 document.body.classList.add(DO_SCROLL ? 'scroll-yes' : 'scroll-no');

 HOLDER.innerHTML += `
  <p>A line of text … <p>A line of text … <p>A line of text … <p>A line of text … <p>A line of text …
  `;

 // Event: keyboard focus.
 BUTTON.addEventListener('focus', async ev => {
  HOLDER.innerHTML += `
  <p data-num="${count}" tabindex="-1">A line of text … (count: ${count})
  <p>A line of text … <p>A line of text … <p>A line of text … <p><a href="#_A_link">A link …</a>
  `;

  await delay();
  const START_ELEM = document.querySelector(`p[ data-num = "${count}" ]`);
  
  START_ELEM.scrollTo({ behavior: 'smooth' });
  START_ELEM.focus();

  console.debug(`Button focus: ${count}, "${ev.target.textContent}"`, ev);

  count++;
 });

 // Event: mouse hover.
 BUTTON.addEventListener('mouseover', async ev => {
  document.body.classList.add('ev');
  document.body.classList.add('mouseover');

  await delay();

  HOLDER.innerHTML += `
  <p>A line of text … (count: ${count})
  <p>A line of text … <p>A line of text … <p>A line of text … <p>A line of text …
  `;

  console.debug('Button mouseover:', count, ev);

  count++;
 });

 if (DO_SCROLL) {
  document.addEventListener('scroll', ev => {
    // Throttling! ~ Test for a small or even number.
    if (count < 5 || count % 2 === 0) {
      HOLDER.innerHTML += `<p>A line of text … (count: ${count})`;
 	}

 	document.body.setAttribute('data-event-count', count);
 	document.body.classList.add('gt-0');

 	console.debug('.');

 	count++;
  });
 }

 async function delay (timeoutMs = 250) {
  return new Promise(resolve => {
    setTimeout(() => resolve(), timeoutMs);
  });
 }
 </script>
	<!doctype html> <title> Infinite content trap </title>

	<style>
	body { margin: 1rem auto; max-width: 35rem; }

	button,
	[ role *= button ] {
	background: #eee;
	border: 1px solid #ccc;
	border-radius: 1px solid #ccc;
	color: #222;
	display: inline-block;
	font-size: inherit;
	padding: .6rem 4rem;
	text-decoration: none;
	}

	main p {
	line-height: 2;
	margin: 2.5rem 0;
	}

	.gt-0 main p {
	line-height: 1.5;
	margin: 1.5rem 0;
	}

	.X_main {
	transition: all 2s;
	max-height: 20rem;
	}

	.X_ev main {
	max-height: 100rem;
	}
	</style>


	<h1> Infinite content trap </h1>

	<p><a href="?scroll=1">With scroll</a> \| <a href="?scroll=0">No scroll</a>.</p>

	<main>
	<p> A line of text … </p>

	</main>

	<p><a role="button" href="#_Add_more_button" >Add more</a></p>

	<p><a href="#_End"> Can you reach the end? </a></p>


	<script type="module">
	// NDF, 17-May-2022.

	const HOLDER = document.querySelector('main');
	const BUTTON = document.querySelector('a[ href *= _Add_more_button ]');
	const DO_SCROLL = /scroll=1/.test(window.location.href);

	let count = 0;

	// Initialize.
	document.body.classList.add(DO_SCROLL ? 'scroll-yes' : 'scroll-no');

	HOLDER.innerHTML += `
	<p>A line of text … <p>A line of text … <p>A line of text … <p>A line of text … <p>A line of text …
	`;

	// Event: keyboard focus.
	BUTTON.addEventListener('focus', async ev => {
	HOLDER.innerHTML += `
	<p data-num="${count}" tabindex="-1">A line of text … (count: ${count})
	<p>A line of text … <p>A line of text … <p>A line of text … <p><a href="#_A_link">A link …</a>
	`;

	await delay();
	const START_ELEM = document.querySelector(`p[ data-num = "${count}" ]`);

	START_ELEM.scrollTo({ behavior: 'smooth' });
	START_ELEM.focus();

	console.debug(`Button focus: ${count}, "${ev.target.textContent}"`, ev);

	count++;
	});

	// Event: mouse hover.
	BUTTON.addEventListener('mouseover', async ev => {
	document.body.classList.add('ev');
	document.body.classList.add('mouseover');

	await delay();

	HOLDER.innerHTML += `
	<p>A line of text … (count: ${count})
	<p>A line of text … <p>A line of text … <p>A line of text … <p>A line of text …
	`;

	console.debug('Button mouseover:', count, ev);

	count++;
	});

	if (DO_SCROLL) {
	document.addEventListener('scroll', ev => {
	// Throttling! ~ Test for a small or even number.
	if (count < 5 \|\| count % 2 === 0) {
	HOLDER.innerHTML += `<p>A line of text … (count: ${count})`;
	}

	document.body.setAttribute('data-event-count', count);
	document.body.classList.add('gt-0');

	console.debug('.');

	count++;
	});
	}

	async function delay (timeoutMs = 250) {
	return new Promise(resolve => {
	setTimeout(() => resolve(), timeoutMs);
	});
	}
	</script>