Screen Doesn't Scroll To The End When Adding Iframe

1

Hi,

I added an iframe inside the page and made it full size so it would scroll through the content when scrolling down, but the screen doesn’t scroll all the way.

Test: https://jsfiddle.net/myFree_1/4yteg7vm/19/

Thanks.

2

it is because you have set scrolling="no" on iframe

3

If I remove it the problem goes away but the toolbar and other information don’t slide up when the iframe is scrolling.

4

this is how iframe works, to have it behave naturally you need to set its height equal to the height of containing window, which is not really possible to know if the website in iframe is not in same origin

1 Like
5

I receive emails from users, the result comes to me as HTML. So I hope I don’t get errors like same origin. When it is onLoad by giving useRef, I reached the width and height information by accessing the document object of the iframe. For now, it is what I wanted. I hope I don’t run into problems.

6

Mini demo:

const iframeRef = useRef(null);

const onViewerReady = () => {
  const mailBody = iframeRef.current.contentDocument.body;
  iframeRef.current.style.width = `${mailBody.scrollWidth}px`;
  iframeRef.current.style.height = `${mailBody.clientHeight}px`;
};

<iframe
  ref={iframeRef}
  scrolling="no"
  onLoad={onViewerReady}
  srcDoc={mail.html}
/>