Hide scrollbars in an iframe

Question

I tried to hide scrollbars in an iframe whose content is loaded from an external website. I used overflow:hidden and also overflow-x: hidden as well as overflow-y: hidden but that doesnt seem to solve my problem

What did I do wrong? Or what is wrong with my approach?

Here is my JSFIDDLE

Here is my HTML

<body>
<div class="outer">
  <div class="noScrolling">
    <iframe scrolling="no" seamless="seamless" class="inner" src="https://www.initialstate.com/embed/#/tiles/kkCIxiV4PJmg6y88ldn5HvhNiALMBdHp" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
</body>

CSS

body {
    width: 100vw;
  height: 100vh;
  margin: 0 auto;
}
.outer {
  position: relative;
  background: url("http://wrb.farm/demo/background-with-backdrop.jpg") no-repeat center;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
}
.noScrolling {
  width: 100%;
  height: 100%;

}

.inner {
  position: relative;
  width: 54%;
  height: 73%;
  top: 9%;
  left: 23%;
  overflow: hidden;

}

score 0 · Answer 1 · answered Dec 20 '15 at 18:59

0

The Scrollbars are from the Element

<div class="gap row" data-ng-class="{edit:app.editMode, auto: autoLayout}">

Wich is inside the iFrame, and not the iFrame itself. So you would have to change the style of this element (overflow:hidden)

answered Dec 20 '15 at 18:59

CoderPi

12,985
4
34
62

I know that one :) But lets say we dont have control over external css. But hey, thank you. – Kilvish Shakal Dec 20 '15 at 19:02
If you don't have control over it, you can't avoid inner Elements to do what their style is set to do :/ – CoderPi Dec 20 '15 at 19:03
@KilvishShakal what you can do however, if you know the element, you can get it via JavaScript and change its styles. Would that be good for you? – CoderPi Dec 20 '15 at 19:04
With javascript do I have to disable scrolling of that element? Moreover, will it override? – Kilvish Shakal Dec 20 '15 at 19:05
You can avoid it to have scrollbars by `ELEMENT.style.overflow = "hidden"` – CoderPi Dec 20 '15 at 19:06
But then, the div wont scroll. I was looking for a way to disable scrollbar and not scrolling – Kilvish Shakal Dec 20 '15 at 19:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/98492/discussion-between-kilvish-shakal-and-codeisir). – Kilvish Shakal Dec 20 '15 at 19:11
http://stackoverflow.com/questions/13752641/scroll-without-a-scrollbar – CoderPi Dec 20 '15 at 19:14

Hide scrollbars in an iframe

1 Answers1