Reputation: 2203

Remove scrollbar from iframe

Using this code

<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="1" marginwidth="1" name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

This is how it appears (the shoutbox on homepage of http://www.talkjesus.com)

How do I remove the horizontal scrollbar and modify the css of the vertical scrollbar?

Upvotes: 206

Answers (18)

Workprint Studios

Reputation: 1

seamless="seamless" scrolling="no"

are the two attributes that are used to remove the scroll bar and the faint line that borders the iframe.

You can combine this with other size restraining attributes to embed a page into another without it looking like you did. This helps to recreate data that you would normally have to recode and take up space on your server.

Finally, including anchors such as <href will allow you to direct the iframe to a specific portion of the page. You must of coarse create a call label on that page directed to the object.

Have fun!!!! :)

Upvotes: -1

Charles C.

Reputation: 3913

Using negative margin and overflow hidden to hide the scrollbar

<div class="scrollbar-hider" style="overflow:hidden">
        <div class="scrollbar-hider-margin" style="margin-right: -17px;">
            <iframe src="" 
                    style="display: block; 
                           overflow: hidden scroll; 
                           height:calc(100vh - 65px); 
                           width: 100%" 
                    frameborder="0" loading="lazy">
             </iframe>
        </div>
</div>

Upvotes: -1

Jakub Bujak

Reputation: 97

<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>

Upvotes: 8

Nima Rahbar

Reputation: 255

UPDATE:

seamless attribute has been removed in all major browsers

Just Add scrolling="no" and seamless="seamless" attributes to iframe tag. like this:-

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"

Upvotes: 23

pavithra ramasamy

Reputation: 9

Instead of iframe:

const blob = new Blob([data], { type: "application/pdf" });
const link = document.createElement("a");
const URL = window.URL.createObjectURL(blob);
link.href = URL;
link.download = filename;
//download the pdf
link.click();
//open the downloaded pdf in its default viewer
window.open(URL);

Upvotes: 0

Dennis Kozevnikoff

Reputation: 2277

None of the above answers worked for me. This is what I did in JS:

Select the iframe element:

var iframe_name = document.getElementById("iframe_name");

Add the attribute to it:

  iframe_name.scrolling = "no";

Upvotes: 4

Andrés

Reputation: 1

When nothing works, float:left could safe you.

iframe{float:left; clear:both;}

Upvotes: -2

Shaya

Reputation: 2932

It's the last resort, but worth mentioning:

You can use the ::-webkit-scrollbar pseudo-element on the iframe's parent to get rid of those famous 90's scroll bars.

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

Edit: though it's relatively supported, ::-webkit-scrollbar may not suit all browsers. use with caution :)

Upvotes: 6

Thyagarajan C

Reputation: 8213

This works in all browsers

<iframe src="http://buythecity.com"  scrolling="no" style=" width: 550px; height: 500px;  overflow: hidden;" ></iframe>

Upvotes: 57

Nico Grill

Reputation: 127

iframe {
  display: block;
  border: none;         /* Reset default border */
  height: 100vh;        /* Viewport-relative units */
  width: calc(100% + 17px);
}
div {
  overflow-x: hidden;
}

Like this you make the width of the Iframe larger than it should be. Then you hide the horizontal scrollbar with overflow-x: hidden.

Upvotes: 5

Allabux B

Reputation: 245

Try adding scrolling="no" attribute like below:

<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>

Upvotes: 22

nirvana74v

Reputation: 1091

Adding scroll="no" and style="overflow:hidden" on iframe didn't work, I had to add style="overflow:hidden" on body of html document loaded inside iframe.

Upvotes: 37

WraithKenny

Reputation: 1041

If anyone here is having a problem with disabling scrollbars on the iframe, it could be because the iframe's content has scrollbars on elements below the html element!

Some layouts set html and body to 100% height, and use a #wrapper div with overflow: auto; (or scroll), thereby moving the scrolling to the #wrapper element.

In such a case, nothing you do will prevent the scrollbars from showing up except editing the other page's content.

Upvotes: 13

Deepika Patel

Reputation: 2701

Add this in your css to hide both scroll bar

iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}

Upvotes: 5

Dean Oakley

Reputation: 5636

Add scrolling="no" attribute to the iframe.

Upvotes: 479

KnightFury

Reputation: 107

<div id="myInfoDiv" seamless="seamless" scrolling="no" style="width:100%; height: 100%; float: left; color: #FFF; background:#ed8719; line-height:100%; font-size:100%; font-family: sans-serif>;

Use the above div and it will not show scroll bar in any browser.

Upvotes: 5