CODEWITHSUNDEEP
javascripthtmlcssiframe
Danyl Semmache
Danyl Semmache

Reputation: 2052

Web - How to not disable but hide the scroll in an iframe?

My website is available here.

Problem is that I'm getting a double scroll because I used an iframe to display content in each page of my website.

I tried this:

<iframe ... scrollable="no"></iframe>

and also tried to override the default css by using !important:

.fancybox-overlay, .fancybox-overlay-fixed {
    overflow: hidden !important;
}

But nothing is working.

How to fix that?

Upvotes: 2

Views: 166

Answers (3)

AP.
AP.

Reputation: 8921

How about making your parent element fit the page so that the only scrollbar is the one inside the iFrame and not the other way?

You can do something like this:

.fit {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}

.Parent {
  border: 2px solid red
}

iframe {
  border: 2px solid green;
  height: 100%;
  width: 100%;
  display: block
}

* {
  box-sizing: border-box
}
<body>
  <div class='Parent fit'>
    <iframe class='fit' src='http://stackoverflow.com'></iframe>
  </div>
</body>

Note:

  • Green border is the iframe
  • Red border is the parent container

Upvotes: 3

Leonardo Wildt
Leonardo Wildt

Reputation: 2599

Try this 

<iframe src="https://bing.com" 
        class="this" 
        scrolling="no" >
</iframe>


.this {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}
<iframe src="http://bing.com" 
        class="this" 
        scrolling="no" >
</iframe>

Upvotes: 0

virus.cmd
virus.cmd

Reputation: 344

You need to use the scrolling attribute not scrallable.

source https://www.w3schools.com/tags/att_iframe_scrolling.asp

Upvotes: 0

Related Questions