Hide scrollbar from iframe and replace it with scrollbar on the page - javascript

I have iframe with vertical scrollbar. I need to remove it and have this scollbar at the the page. So, when I need to scroll the content of the iframe, I can use the page scrollbar.
I did hide the the vertical scrollbar from the iframe but now, I don't have it at all.
I use:
iframe::-webkit-scrollbar {
display: none;
}
And this works only with google chrome but it doesn't work with firefox and Internet Explorer. I tried all the following:
iframe::-moz-scrollbar {display:none;}
iframe::-o-scrollbar {display:none;}
iframe::-google-ms-scrollbar {display:none;}
iframe::-khtml-scrollbar {display:none;}
But they didn't work.
So, I need your help to hide the scrollbar from iframe with all browsers.
And have the ability to scroll the iframe's content from the scrollbar of the page.
Thank you

Depending on the version of IE, sometimes using iframe {overflow: hidden;} will hide the scrollbar. But putting scrolling="no" in your iframe usually works on all browsers.

You can add JavaScript to the page within the IFRAME to, on load and on resize, set the height of the IFRAME within the parent. The page will need to exist within the same domain as the parent, although you may be able to overcome this with browser security settings.
Within the page (example uses jQuery):
if (window != window.parent)
$(function() {
var resize = function() { $(window.parent.document).find("IFRAME[name='" + window.name + "']").height($(document).height()); };
$(window.parent).resize(resize);
resize();
});
You will need to give the iframe a name on the parent page:
<iframe name="anything" ...></iframe>

This seems to work just fine:
Html 5/CSS
.ifm {
width: 1200px;
height:800px;
overflow-y: hidden;
}
<iframe src="https://bing.com"
class="ifm"
scrolling="no"
seamless="seamless">
</iframe>
Based on this post.

Related

How to remove scroll from the iframe and set the height & width according to content

I have to work on a project and I am facing a problem of not removing the scroll from the iframe. actually, I am trying to pass several pages in a single iframe. So the iframe height is not set according to the content.
I tried a lot of javascript code but none of them works.
<iframe src = "" scrolling = "no"></iframe>
<style>
iframe{
overflow: hidden;
}
</style>
Try this, it should disable the scrolling in iframes

How can I hide or color iframe scrollbar in Firefox and Internet Explorer?

How do I hide (and color) the iframe scrollbar in Firefox and Internet Explorer with css or Javascript? I am using height auto iframe content and it is working fine but scrollbar is showing (except in Chrome). I am using iframe height auto for cross domain height auto.
I recall having a similar issue a while back , depending on your needs
I would try using :
overflow-y:hidden;
in the css or the
scrolling="no"
inside the iframe element. ( This should work)
If all else fails , here's a little hack , set the parent div slightly smaller width than the child div and set its css like so:
.parent {
overflow-x:hidden;
width:486px;
height:300px;
}
.child {
width:500px;
height:auto;
}
Then to make it look even slightly better play with the css eg: set the border right and it will look as though you never did such a hack , but as i said before , try the scrolling="no" first , as this latter method would probably be frowned upon by some, however in my defense it is a solution to a problem.
Happy Coding.
If you have a script that's taking care of the height so you don't need to scroll, you can simply turn scrolling off so they're not there, getting in the way:
<iframe src="//www.abc.net.au/" scrolling="no" width="500" height="500"></iframe>
scrolling="no" does the trick.
Example: http://jsfiddle.net/rt2bf/

Scroll iframe using buttons - iPhone

I'm creating the website where content is dynamically added using iframe (files of iframes are on the same server). Loaded iframe has buttons to scroll iframe content but I can't find a reason why it doesn't work on iPhone - it works well using Android. Here is the code I used:
$('#menu li a').on('click', function(){
var element = $(this).attr('data-scroll');
$('body').animate({
scrollTop: $('.page[data-bookmarks=' + element + ']').offset().top
}, 1000);
});
Btw. click event works well, because I checked it using alert. Simply scrollTop seems doesn't work on iOS devices.
I found several links that might solve this issue, but the one that I ran into the most was this:
It's much easier to control overflowed divs than it is iFrames, and the scrolling + blank content issues are working all the way back to iOS 4, where previously I wasn't even able to get the 2 finger scrolling to work (in iFrames).
It goes something like this:
<iframe id="example-iframe" width="600" height="200" src="a-file.html"></iframe>
a-file.html:
<html>
<body>
<div id="wrapper" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
...
</div>
</body>
</html>
Other Links
-webkit-overflow-scrolling: touch does not "obey" z-index
iFrame scrolling doesn't work on an iPhone
iFrame scrolling on an iOS device
dropdown-menu problems with -webkit-overflow-scrolling:touch on the iPad

How would you make an iframe's height always extend to the bottom of the browser window?

I want to generate an iframe whose height will extend to the bottom of the browser window. If the user changes the height of the browser, then the iframe's height should change dynamically as well. However, I'd like for the iframe to have a minimum height past which it would not shrink any further. How would I do this?
I'm doing something very similar.
1) Get a hold of the window resize event (I am using jQuery)
$(window).resize(function(){});
2) Pop in what you want your actions to be. For me I was setting a height explicitly on the body of the document so my CSS of height:100% on an inner container would take hold. You could do anything within the function:
$(window).resize(function(){
$('body').height($(document).height());
});
My markup :
<html>
<body>
<div class="full-height">Hello World</div>
</body>
</html>
My CSS :
body {position:relative;}
.full-height {height:100%;}
It would help to see what you're working with, but this will hopefully point you in the right direction.
iframe {
height:100%;
min-height:300px;
}
have you tried putting the iframe inside a wrapper div
<div id="iframediv" style="min-height:500; overflow:scroll">
<iframe src="http://google.com">­ </iframe>
</div>
It's worth a shot.

How to disable scrolling the document body?

I have a HTML which has lot of content and a vertical scrollbar appears as soon as the HTML is loaded. Now from this HTML a full screen IFRAME is loaded. The problem is when the IFRAME is loaded, the parent scrollbar still persists, I want to disable the scrollbar when the Iframe is loaded.
I tried:
document.body.scroll = "no", it did not work with FF and chrome.
document.style.overflow = "hidden"; after this I was still able to scroll, and the whole iframe would scroll up revealing the parent HTML.
My requirement is, when the IFRAME is loaded, we should never be able to scroll the entire IFRAME if the parent HTML has a scrollbar.
Any ideas?
If you want to use the iframe's scrollbar and not the parent's use this:
document.body.style.overflow = 'hidden';
If you want to use the parent's scrollbar and not the iframe's then you need to use:
document.getElementById('your_iframes_id').scrolling = 'no';
or set the scrolling="no" attribute in your iframe's tag: <iframe src="some_url" scrolling="no">.
with css
body, html {
overflow: hidden
}
The following JavaScript could work:
var page = $doc.getElementsByTagName('body')[0];
To disable Scroll use:
page.classList.add('noscroll');
To enable Scroll use:
page.classList.remove('noscroll');
In the CSS file, add:
.noscroll {
position: fixed!important
}
add this css
body.disable-scroll {
overflow: hidden;
}
and when to disable run this code
$("body").addClass("disable-scroll");
and when to enabled run this code
$("body").removeClass("disable-scroll")
I know this is an ancient question, but I just thought that I'd weigh in.
I'm using disableScroll. Simple and it works like in a dream.
I have had some trouble disabling scroll on body, but allowing it on child elements (like a modal or a sidebar). It looks like that something can be done using disableScroll.on([element], [options]);, but I haven't gotten that to work just yet.
The reason that this is prefered compared to overflow: hidden; on body is that the overflow-hidden can get nasty, since some things might add overflow: hidden; like this:
... This is good for preloaders and such, since that is rendered before the CSS is finished loading.
But it gives problems, when an open navigation should add a class to the body-tag (like <body class="body__nav-open">). And then it turns into one big tug-of-war with overflow: hidden; !important and all kinds of crap.
Answer :
document.body.scroll = 'no';

Categories