Hide scroll from an iframe

Asked

Viewed 309 times

1

I have an iframe element on my site but it’s showing the vertical scroll. How to hide it?

Sample code:

<html>
<style>
.container {
  width: 300px;
  overflow: hidden;
}

.child {
  width: 200%;
  height: 200px;
  overflow: hidden;
   overflow-x: hidden;
}

</style>

<body>
    <div class="container">
       <div class="child">
            <iframe frameborder="0"  src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main"></iframe>
        </div>
    </div>
</body>
</html>

NOTE: I tried to use scrolling="no" but it disables scroll, I don’t want to disable, just hide.

html iframe rolling

  • There is no way to hide the scroll from iframe and make it scrollable, EXCEPT if you have control over its internal HTML, if it is from the same domain. Or else you can resort to the gambit of the answer below.

1 answer

3


Dude you already have one div outside the iframe use it to make a "Crop box". Kind let it slightly smaller than the iframe that is inside just enough to "cut" the scroll bar...

inserir a descrição da imagem aqui

OBS: Here will not work because your address iframe is http and not https. So in the example below I used another reference, just as an example.

.container {
  width: 300px;
  overflow: hidden;
}

.child {
  width: 280px;
  height: 150px;
  overflow: hidden;
  overflow-x: hidden;
  border: 1px solid #000;
}
<div class="container">
    <div class="child">
        <iframe frameborder="0"  src="https://motherfuckingwebsite.com/" ></iframe>
    </div>
</div>

Browser other questions tagged html iframe rolling

You are not signed in. Login or sign up in order to post.