Display: block; elements causes the script to not

问题:

I have a script that is designed when you scroll all the way to the bottom inside a div it triggers an alert that says End of scroll.

I notice on most browsers this works with the h2 tag regardless of it having a display: inline-block; or a display: block; structure to it.

But on certain browsers this does not trigger that alert due to the h2 tag having a display: block structure to it but if I change it to have a

display: inline-block; structure to it in CSS that alert in the script works in those browsers that didn't work with display: block;.

Why is that and how can I use a display: block; structure to it and it will still work with that script.

Here is my code and notes

display: block;

This works on all browsers on PC, Android, Iphone but this does not work on Ipad.

document.addEventListener('DOMContentLoaded',function(){

//Scrolling to the bottom inside the results-container triggers the alert
document.querySelector('#results-container').addEventListener('scroll',scrollTrigger);

function scrollTrigger(e){
var resultsContainer = e.currentTarget;
  if (Math.ceil(resultsContainer.scrollTop) + resultsContainer.clientHeight >= resultsContainer.scrollHeight) {
    EndOfScroll();
  }
}
//

function EndOfScroll(){
alert('End of scroll');
}

});

#results-container {
	background-color: red;
	width: 350px;
	height: 300px;
	margin: auto;
	overflow-y: auto;
}

#number{
	background-color: gold;
	color: black;
	border-radius: 100%;
	padding: 5px;
}

h2{
display: block;
width: 100%;
}

<div id="results-container">
<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>
</div>

display: inline-block;

This works on all browsers on PC, Android, Iphone and on Ipad.

document.addEventListener('DOMContentLoaded',function(){

//Scrolling to the bottom inside the results-container triggers the alert
document.querySelector('#results-container').addEventListener('scroll',scrollTrigger);

function scrollTrigger(e){
var resultsContainer = e.currentTarget;
  if (Math.ceil(resultsContainer.scrollTop) + resultsContainer.clientHeight >= resultsContainer.scrollHeight) {
    EndOfScroll();
  }
}
//

function EndOfScroll(){
alert('End of scroll');
}

});

#results-container {
	background-color: red;
	width: 350px;
	height: 300px;
	margin: auto;
	overflow-y: auto;
}

#number{
	background-color: gold;
	color: black;
	border-radius: 100%;
	padding: 5px;
}

h2{
display: inline-block;
width: 100%;
}

<div id="results-container">
<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>

<h2 id='number' >X</h2>
</div>

I don't think nobody can solve or explain this on stack over flow. Not even the pros have not figure this out from other help sites. Let's see if any body can figure this out on here.