iframe inner scrollbar is stuck

Question

I have a page that has an iframe in it. for styling, I'm using tailwind-css. Now I have two scrollbars - iframe inner scroll and browser'scroll, I want to hide the inner scrollbar of the iframe and scroll with the browser scrollbar. I tried to use scrolling="no" and the inner scrollbar is removed but the browser scroll is stuck and the iframe is not fully displayed

<div className="h-full overflow-scroll>
   <iframe
      src={url}
      frameBorder="0"
      width="100%"
      scrollbar="no">
   </iframe>
</div>

Do you have any idea how can I do this? Thank you in advance

Does this answer your question? [Remove scrollbar from iframe](https://stackoverflow.com/questions/10082155/remove-scrollbar-from-iframe) — Camelopardalus, Jun 23 '22 at 17:51
@Thomas I think no, my issue is that after removing inner scrollbar of iframe, browser scrollbar is stuck and doesnot scroll full iframe display — Pump3333, Jun 23 '22 at 18:01
dude, if you disable the scroll bar in the iframe, you wont be able to scroll in the iframe — Dean Van Greunen, Jun 23 '22 at 18:25
you need to set a height value if you want to do what you want to do — Dean Van Greunen, Jun 23 '22 at 18:26
@DeanVanGreunen I don't want to scroll in the iframe, I want to scroll page where I use iframe — Pump3333, Jun 23 '22 at 18:30

score 0 · Answer 1 · answered Jun 23 '22 at 18:33

0

set the height to fit the content and disable the scrollbar

<div className="h-full overflow-scroll>
   <iframe
      src={url}
      frameBorder="0"
      width="100%"
      height="640px"
      scrollbar="no">
   </iframe>
</div>

answered Jun 23 '22 at 18:33

Dean Van Greunen

5,060
2
14
28

iframe inner scrollbar is stuck

1 Answers1