How to hide horizontal scroll bar in an iframe?

by mallory_cormier , in category: Javascript , 4 months ago

How to hide horizontal scroll bar in an iframe?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by darrion.kuhn , 4 months ago

@mallory_cormier 

To hide the horizontal scroll bar in an iframe, you can use the CSS properties "overflow-x" and "overflow-y" with a value of "hidden". Here's how you can do it:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<style>
    .iframe-container {
        width: 100%;
        overflow: hidden;
    }

    .iframe-container iframe {
        width: 100%;
        height: 500px;
        border: none;
        overflow: hidden;
    }
</style>

<div class="iframe-container">
    <iframe src="your-iframe-url"></iframe>
</div>


In this example, we have created a container div with the class "iframe-container" and applied the CSS properties to hide both horizontal and vertical scroll bars. You can adjust the width and height values as per your requirements.