Scroll to a element with a specific class in an iframe-CodePudding

I have this div:

<div >
        <div >
          <div ></div>
          <div ></div>
          <div ></div>
          <div ></div>
        </div>
        <div >
          <div ></div>
          <div ></div>
          <div ></div>
          <div ></div>
        </div>
        <div >
          <div ></div>
          <div ></div>
          <div ></div>
          <div ></div>
        </div>
        <div >
          <div ></div>
          <div ></div>
          <div ></div>
          <div ></div>
        </div>
      </div>

that is opened in an iframe, and I want to have the iframe scroll to the div with class grid-container when it is loaded. the iframe:

<iframe style="position:absolute;border:none;width:100%;height:93%;" src="https://ovolve.github.io/2048-AI/" allowfullscreen></iframe>

CodePudding user response：

i think this is useful for you. check this. in your iframe src files(which you added in iframe) write this js codes:

document.getElementsByClassName("grid-container")[0].scrollIntoView();

this is scrolling automatically to div which class name is grid-container.

CodePudding user response：

use scrollTop or scrollTo(xcoord,ycoord).

<body>
    <iframe
      src="https://react-bootstrap.github.io/getting-started/introduction/"
      width="900px"
      height="1000px"
    ></iframe>
</body>

  <script>
    let myIframe = document.querySelector("iframe");
    myIframe.scrollTop = 1500;
  </script>