How to hide scroll bar in iFrame but still scroll

[jasonturo]

Hey there,

I have an iFrame using an HTML element when set to scroll displays the vertical & horizontal scroll bars. How could they be removed from the iFrame and still allow scrolling?

I came across the below suggestion in code. Any suggestion on how to implement this in bubble?

Another suggestion was to use CSS in the page header, but that did not work yet (at least while the iframe is in a reusable. I’ll test moving to the page level, cant see how that will help but worth a try).

Thanks.
Cheers

[daviddr17]

<style type="text/css"> ::-webkit-scrollbar { width: 0px; height: 0px; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: transparent; border: 0px none; border-radius: 0px; } ::-webkit-scrollbar-thumb:hover { background: transparent; } ::-webkit-scrollbar-thumb:active { background: transparent; } ::-webkit-scrollbar-track { background: transparent; border: 0px none; border-radius: 0px; } ::-webkit-scrollbar-track:hover { background: transparent; } ::-webkit-scrollbar-track:active { background: transparent; } ::-webkit-scrollbar-corner { background: transparent; } </style>

copy this to your site

[jasonturo]

Hi @daviddr17 Thank you. How would you recommend inputting the code? Into an HTML element in the page? Need to connect it to the iframe element with an id attribute?

Thanks for the insights

[daviddr17]

It depends on what you want to achieve. If its just the iframe, I would put it in an html element which have a size of 0x0 on that certain page.

Then you don’t have to link anything, its just working.

[jasonturo]

Thanks, @daviddr17. Interesting. I added it to an HTML element, however the scroll continues to populate in the iframe

[daviddr17]

maybe you can send me a link to editor and website where you are using it and I can have a look there.