Дисплей: блок; элементы заставляют скрипт не работать в определенных браузерах

Question

У меня есть скрипт, который разработан, когда вы прокручиваете до конца внутри элемента div, он вызывает предупреждение «Конец прокрутки».

Я заметил, что в большинстве браузеров это работает с тегом h2 независимо от того,с отображением: inline-block;или дисплей: блок;структура к нему.

Но в некоторых браузерах это предупреждение не запускается из-за тега h2, имеющего для него структуру display: block, но если я изменю его на отображение

: inline-блок;структурируйте его в CSS, чтобы предупреждение в скрипте работало в тех браузерах, которые не работали с display: block;.

Почему это так и как я могу использовать display: block;структурировать его, и он все еще будет работать с этим сценарием.

Вот мой код и примечания

display: block;

Это работает на всехбраузеры на ПК, Android, Iphone, но это не работает на 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>

Отображение: встроенный блок;

Работает во всех браузерах на ПК, Android, Iphoneи на 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>

Я не думаю, что никто не может решить или объяснить это в стеке над потоком.Даже профессионалы не поняли это из других справочных сайтов.Посмотрим, сможет ли кто-нибудь понять это здесь.