How to get delayed auto scrolling from iframe content

Question

I am looking for a way to have my iframe auto scroll down an x amount every 5 seconds. Is there a way to do this with just css?

BONUS: Would like to have it scroll back to the top when it reaches the bottom.

I am new to css and html but noticed that 'scrolling="auto"' isn't the answer here (sorry I am a noob!). Any help would be greatly appreciated, thanks!

Answer 1

Using this answer, you can programmatically adjust the iframe from within JS. You will just have an incremental jump each time using the builtin setInterval method, passing in your function for changing coordinates as the first param, and 5000 as the second param for delay. With that, if you know the entire iframe height, you can then reset once the scroll coordinates clip the bottom of the page. I.e. if the ycoord >= height of iframe, ycoord == 0.

Rough pseudo:

const IFRAME_HEIGHT = 500;
const SCROLL_DELTA = 50;
let ycoord = 0;
onLoad(){
  setInterval(scrollIframe, 5000);
}
scrollIframe(){
   myIframe.contentWindow.scrollTo(0 ,ycoord)
   ycoord = ycoord + SCROLL_DELTA > IFRAME_HEIGHT ? 0 : ycoord + SCROLL_DELTA;
}