I'm trying to hide the scrollbar for an iframe and it's not working. Here's my HTML:
<style>
.no-scrollbar::-webkit-scrollbar {
display: none
}
.no-scrollbar {
overflow: none
}
</style>
<iframe class="no-scrollbar" id="iframe">zzz</iframe>
<script type="text/javascript">
var doc = document.getElementById('iframe').contentWindow.document;
doc.open();
doc.write('<body style="width: 110%">zzz</body>');
doc.close();
</script>
Here's my fiddle:
https://jsfiddle.net/9a7k2dgn/
I can change it by changing the width to 90% (altho apparently not even 100% works; 90% does but not 100%) but, for the purposes of this example, let's assume that's not an option. And it's none-the-less my understanding that overflow: none should work regardless.
The scroll appeared is the scroll inside iframe content, not the scrollbar of iframe selector.
To hide this, you need to implement overflow: hidden on iframe body style as follows.
doc.write('<body style="width: 110%; overflow: hidden;">zzz</body>');
Related
I am having a problem with iframes on iOS (Safari).
We're using a webpage within our webpage through an iframe - it looks great on PC & on Android, but on iOS the whole view is broken and I can't get the scrollable iframe to work on iOS anymore.
We used to fix the iOS scroll issue outside of the iframe itself (in a div) with:
overflow: auto;
-webkit-overflow-scrolling: touch;
position: fixed;
Unfortunately, this isn't working anymore so we took it out.
This is how the iframe looks right now:
<div class="nobottommargin">
<p><iframe style="height: 500px; width: 100%; border: none; top: 0; left: 0;" src="https://url.com" scrolling="yes" allowfullscreen="yes" width="320" height="240"></iframe></p>
</div>
Any idea on how to fix this issue or what other alternatives could be used here?
Edit: what I also tried, without any success:
touch-action: auto on the iframe tag
scrolling="no" on the iframe tag
pointer-events: none
Edit 2: Scrolling is working now BUT while scrolling down, it's cutting my iframe off in the middle. Issue only on iOS again (looks fine on Android & PC).
Here's the working iOS scrolling code with the iframe crop bug that I have:
<div class="scroll-container scroll-ios" style="height:500px;width: 100%; position:relative">
<div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;min-width:50%;min-height:50%;max-height:500%;top:0;left:0;-webkit-overflow-scrolling: touch !important;overflow-y:scroll !important">
<iframe id="iframe_test" src="url.com" style="height: 100%; width:100%;min-width:100%;" name="myiFrameFix" allowfullscreen="yes" scrolling="yes"> </iframe>
</div>
</div>
Edit 3: What I also tried was, removing all the CSS that tricks the browser into using the GPU:
-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;
This didn't fix the iframe iOS bug either unfortunately (tried with iOS 9 & 11).
Edit 4: Tried to fix the iframe cropping issue with a script, to make the height of the iframe the same as the whole body. Once again, I was unsuccessful.
<script>
$(function() {
var iframe = $("#iframe_test");
iframe.load(function() {
$("body").height(iframe.height());
});
});
</script>
Check this on your iPhone the scroll works smoothly.
.nobottommargin {
width: 500px;
height: 500px;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
iframe {
height: 100%;
width: 100%;
border: none;
display: block;
}
<div class="nobottommargin">
<iframe src="http://www.weather.gov/" frameborder="0">
</iframe>
</div>
It might be worth including some external JavaScript with a media query to fix this issue, it's currently being applied to every single display.
To fix this. You need to specifically set height on the iframe.
.wrapper {
-webkit-overflow-scrolling: touch;
}
<div class="wrapper">
<iframe
style="height: 500px"
></iframe>
</div>
The hardest part is to get content height of the iframe. You can let iframe tell the parent page by using window.postMessage if you own the iframe. Otherwise you need to check height periodically until you think it is fixed.
var iframe = document.querySelector('iframe');
var setHeight = function(height) {
iframe.style.height = height + 'px';
};
var getHeight = function() {
return iframe.getRootNode().body.scrollHeight;
};
var prevHeight = 0;
var adjustHeight = function() {
var height = getHeight();
if (prevHeight !== height) {
prevHeight = height;
setTimeout(adjustHeight, 2000);
} else {
setHeight(height);
}
};
setTimeout(adjustHeight, 2000);
I've been having this issue for some time now and finally found a fix that works for me by reducing the width of the div disappearing in the iframe. Mine was 100% and reducing to 95% solved it. I'm not sure about the actual max width in px but I think it has to be less than the width of the screen. I tried all the css tricks you mentioned and more, but this is the only thing that has worked.
Can't seem to make the iframe appear with a scroll-bar.
Go to https://billiving-qa.azurewebsites.net/accountant
email: qa#billiving.com
pass: 111111
Reload the list with F5, then click new invoice on the right side. The content is lengthy but doesn't show the scroll-bar.
My css uses the following:
.frm {
position: fixed; width: 100%; height:100vh; overflow-y:scroll !important; overflow-x:hidden !important;
}
html is as follows:
<iframe frameborder="5" class="frm" ng-src="{{trustSrc(url)}}" scrolling="yes"></iframe>
You have hidden scrollbars in ionic.app.css:
::-webkit-scrollbar {
display: none;
}
I don't know if it is possible to override this style so probably you have to remove it. Similar question.
I have embedded an iframe n my page with content from another site.Here is a link if you want to visit it http://8mags.com/bored/wtf/wtf01.html
The problem is that I am unable to remove the scrollbars and a few other things.
My CSS code is here
html {
overflow-x: auto !important;
overflow-y: auto !important;
}
body {
overflow-y: auto !important;
background: white !important;
}
The problem is that scrollbar is still there.Also the background does not change to white inside iFrame.I also tried to hide a few details with this code
.quote-subtitle {
display: none !important;
}
but it does not work either.
EDIT
The code that produces the iFrame is this one
<span class="quora-content-embed" data-name="What-are-some-of-the-most-awesome-psychological-facts/answer/Arjun-Subramaniam/quote/2114886">Read <a data-width="541" data-height="893" class="quora-content-link" href="http://www.quora.com/What-are-some-of-the-most-awesome-psychological-facts/answer/Arjun-Subramaniam/quote/2114886" data-embed="nqjyswb" data-type="quote" data-id="2114886" data-key="78561af9adeb1d847ceae88107798254">Quote of Arjun Subramaniam's answer to What are some of the most awesome psychological facts?</a> on Quora<script type="text/javascript" src="http://www.quora.com/widgets/content"></script></span>
<body class=" logged_out" style="overflow: hidden;">
i use this on link and worked,and hidden the scrollbars.
or use this to access content of iframe
$('#iframe').contents().find('body').css('overflow','hidden');
I used style="overflow: hidden;white-space:nowrap;"
scroll bar is removed , but the arrows are not getting removed , for a body tag
Use:
style="overflow-y: hidden;"
You should not really not use inline styles. Try write it like this:
<head>
<style="text/css">
#container { overflow: hidden; }
</style>
</head>
<body>
<div id="container">Content goes here</div>
</body>
Could I see your code if that does not work as I can't see what you have done.
EDIT:
Not sure if I completely get what you are trying to achieve.
Add the following style to the page.
<style="text/css">
.hideOverflow { overflow: hidden; }
</style>
Are you using jQuery?
If so, add this within your window.open event.
$('body').addClass('hideOverflow');
Can I see your window.open script?
I want to de-activate or remove the vertical scrollbar in an HTML page.
How to do that ?
Thanks.
If you really need it...
html { overflow-y: hidden; }
What I would try in this case is put this in the stylesheet
html, body{overflow:hidden;}
this way one disables the scrollbar, and as a cumulative effect they disable scrolling with the keyboard
put this code in your html header:
<style type="text/css">
html {
overflow: auto;
}
</style>
Meder Omuraliev suggested to use an event handler and set scrollTo(0,0). This is an example for Wassim-azirar. Bringing it all together, I assume this is the final solution.
We have 3 problems: the scrollbar, scrolling with mouse, and keyboard.
This hides the scrollbar:
html, body{overflow:hidden;}
Unfortunally, you can still scroll with the keyboard:
To prevent this, we can:
function keydownHandler(e) {
var evt = e ? e:event;
var keyCode = evt.keyCode;
if (keyCode==38 || keyCode==39 || keyCode==40 || keyCode==37){ //arrow keys
e.preventDefault()
scrollTo(0,0);
}
}
document.onkeydown=keydownHandler;
The scrolling with the mouse just naturally doesn't work after this code, so we have prevented the scrolling.
For example: https://jsfiddle.net/aL7pes70/1/
This makes it so if before there was a scrollbar then it makes it so the scrollbar has a display of none so you can't see it anymore. You can replace html to body or a class or ID. Hope it works for you :)
html::-webkit-scrollbar {
display: none;
}
In HTML
<div style="overflow: hidden;">
in CSS
overflow: hidden;
you can also end scrolling for x or y separately
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */