Блог

Идея заключается в том, что все iframes показывают конец страницы, где находится карта давления. Но когда они создаются, кадры iframe не отображаются в одной и той же начальной позиции, поэтому, когда я пытаюсь прокрутить их все вниз, некоторые пересекают порог!

 lt;htmlgt;  lt;headgt;  lt;stylegt;  iframe {  height: 200px;  width: 100%;  border: none;  }  .iframe-container {  height: 120px;  width: 700px;  overflow: auto;  overflow: hidden;  float: left;  }  lt;/stylegt;  lt;/headgt;  lt;body style="background-color:black;"gt;  lt;div class="grid games" id="jogos-sofascore"gt;  lt;div id="select-box-5" style="width: 100%;"gt;  lt;div class="iframe-container" gt;  lt;iframe id="iframe" src="https://www.sofascore.com/event/9985319/attack-momentum/embed"gt;lt;/iframegt;  lt;/divgt;  lt;div class="iframe-container"gt;  lt;iframe id="iframe" src="https://www.sofascore.com/event/9985309/attack-momentum/embed"gt;lt;/iframegt;  lt;/divgt;  lt;div class="iframe-container"gt;  lt;iframe id="iframe" src="https://www.sofascore.com/event/9992075/attack-momentum/embed"gt;lt;/iframegt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;scriptgt;  function atualizar() {  document.querySelectorAll('.iframe-container').forEach(e =gt; e.scrollTop = e.scrollHeight)  }  setInterval(atualizar,5000);  lt;/scriptgt;  lt;/bodygt; lt;/htmlgt;  

Я попытался использовать способ прокрутки вверх, а затем до конца:

 document.querySelectorAll('.iframe-container').forEach(e =gt; e.scrollTop = 0) document.querySelectorAll('.iframe-container').forEach(e =gt; e.scrollTop = e.scrollHeight)  

Но это не сработало, iframes не были прокручены к началу, как следовало бы.

Как я мог бы решить эту проблему, сделав событие прокрутки до конца страницы податливым независимо от начальной позиции iframes?

ожидаемый результат:

Текущий Результат:

Вам нужно установить высоту iframe на высоту содержимого.

В настоящее время вы устанавливаете высоту каждого iframe на 200px . Однако высота содержимого варьируется для каждого отдельного источника. Если высота источника iframe меньше , чем 200px , вы «перепишете». В этом случае вы можете применить конкретное height к каждому iframe .

 document.querySelectorAll('.iframe-container').forEach(e =gt; e.scrollTop = e.scrollHeight) 

 lt;htmlgt;  lt;headgt;  lt;stylegt;  iframe {  width: 100%;  border: none;  }  .iframe-container {  height: 120px;  width: 700px;  overflow: auto;  overflow: hidden;  float: left;  }  lt;/stylegt;  lt;/headgt;  lt;body style="background-color:black;"gt;  lt;div class="grid games" id="jogos-sofascore"gt;  lt;div id="select-box-5" style="width: 100%;"gt;  lt;div class="iframe-container" gt;  lt;iframe id="iframe" src="https://www.sofascore.com/event/9985319/attack-momentum/embed" height="200"gt;lt;/iframegt;  lt;/divgt;  lt;div class="iframe-container"gt;  lt;iframe id="iframe" src="https://www.sofascore.com/event/9985309/attack-momentum/embed" height="155"gt;lt;/iframegt;  lt;/divgt;  lt;div class="iframe-container"gt;  lt;iframe id="iframe" src="https://www.sofascore.com/event/9992075/attack-momentum/embed" height="155"gt;lt;/iframegt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/bodygt; lt;/htmlgt; 

Обратите внимание, что вы можете получить высоту содержимого iframe , перейдя к его источнику и получив тело offsetHeight (например, document.body.offsetHeight ).