Как сделать бесконечный скроллер iframe, который останавливается при наведении

Я хотел, чтобы на моем веб-сайте была автопрокрутка для моего iframe. Когда я просматривал документацию по этому вопросу, я обнаружил, что ее очень мало. Так что, надеюсь, эта статья поможет вам.

Чтобы увидеть это в действии, посетите: https://kylernelson.dev

script.js

//the time it waits before page scrolls from the top
var waitBeforePageScrolls = -50;
//the time it waits when it hits the end of the page before looping back to the top
var waitBeforePageTop = 100;
//current height of the page
var height = waitBeforePageScrolls;
//if the mouse is hovering on iframe
var hover = false;
//the time it takes to scroll again in milliseconds
var scrollInterval = 5;
//how much it scrolls per interval
var scrollAmount = .3;
setInterval(function() {
    var iframe = document.getElementById('bannerIframe');
    if(!hover) {
        iframe.contentWindow.scrollTo(0, height);
        height += scrollAmount;
    }
    else {
        height = iframe.contentWindow.pageYOffset;
    }
if(height > iframe.contentWindow.pageYOffset + waitBeforePageTop) {
        height = waitBeforePageScrolls;
    }
}, scrollInterval);
function iframeMouseEnter() {
    hover = true;
}
function iframeMouseOut() {
    hover = false;
}

index.html

<iframe src="/HighKey-LowKey/index.html" id="bannerIframe" onmouseenter="iframeMouseEnter()" onmouseout="iframeMouseOut()"></iframe>

Вы можете скопировать и вставить это, вам просто нужно изменить src iframe на ваш источник html и связать JavaScript с вашим html. Если вы не хотите, чтобы страница ждала прокрутки, вы можете установить первые 2 переменные равными 0. Переменные «scrollInterval» и «scrollAmount» устанавливают, насколько быстро и медленно прокручивается страница. Если вы измените один из этих параметров, он может быть не очень плавным, поэтому вам придется точно настроить их оба, чтобы все было правильно.