With Safari you can disable most iframe scrolling by setting style="overflow: hidden;" on the iframe. However, if you click in the iframe and move the mouse the content scrolls anyhow.
Example:
<html>
<body>
<iframe style="width: 100%; height:100px; overflow: hidden;" scrolling="no" src="scrollcontent.html">
</iframe>
</body>
</html>
scrollcontent.html:
<html scroll="no" style="overflow:hidden;">
<body scroll="no" style="overflow:hidden;">
<div style="background-color: green; height:100px;">A</div>
<div style="background-color: red; height:100px;">B</div>
</body>
</html>
In this example, the iframe should only show a green area and it should be impossible to reveal the red area. This is mostly true: there is no scrollbar, the mouse wheel doesn't do anything and neither do the arrow keys.
However click and drag still scrolls the view. This is particularly noticeable when selecting text.
Does anyone know any trick to stop Safari from doing this?
You could add an window.onscroll method that does a window.scrollTo(0, 0);. It's not pretty but it should work.
In worst case I would try loading the content with jquery load()
and then you wrap everything with a <div style"overflow:hidden">your content...</div>
Related
<!DOCTYPE html>
<html>
<body>
<h1>The iframe element</h1>
<iframe src="https://e.infogram.com/_/s40K32mU3NsxL0zWQjMw?src=embed" title="W3Schools Free Online Web Tutorials" width="100%" height="600px">
</iframe>
</body>
</html>
I've an iframe, and there's a tooltip inside the iframe but when clicked it, the tooltip pop up is displayed outside of iframe width, so we should have to scroll horizontally to see the hidden popup texts. How can we show the tooltip popup without scrolling horizontally?
I would like to have the contents of an html webpage displayed in another (parent) html webpage, stretch the embedded webpage to the width of the parent and also remove the scroll bar of the embedded webpage while being able to scroll down the contents of the embedded webpage using the the scroll bar of the main page as the height of the embedded contents are too long to fit. I tried using code from answers to similar problems including this:
<iframe style='overflow:hidden; width:100%; height:100%' scrolling = "no" src="annotated list of courses.html" frameborder="0" width="100%" height="100%"> </iframe>
but I cannot achieve the desired outcome. I would like is to be able to scroll the contents of the embedded webpage using the scrollbar of the parent page. It is possible (with no need to copy code form the embedded HTML to the parent one instead) and how? Thanks.
I solved the problem by specifying a specific height for the embedded webpage which is greater than or equal to the height of the webpage like this:
<div id="content" class="content content-full" style="margin-top: -40px;">
<iframe style='overflow-y:hidden; width:100%; height:17560px' src="annotated list of courses.html" frameborder="0" width="100%" height="17560px" type="text/html"> </iframe>
</div>
I hope this can solve the problem also for others and any better or different slolution is also appreciated.
ps: You have to specify a height that is at least equal to the height of the contents of the embedded webpage or element for the scrollbar to disappear.
I've solved it by using two DIVs, one inside the other.
<div style="overflow-y: hidden; border: 2px solid black; width: 300px; height: 300px; position:absolute; left: 100px; top: 100px">
<div style="margin-top: -100px; width: 300px; height: 400px">
<iframe scrolling="no" style='pointer-events: none; width:100%; height: 100%' src="https://earth.nullschool.net/#current/wind/surface/level/orthographic=-325.19,32.21,3000/loc=35.073,31.923" frameborder="0" type="text/html"></iframe>
</div>
</div>
I've disabled The scrollbars by setting scrolling="no"
I've diasbled user clicks by setting style='pointer-events: none;'
Here is a working sample - https://jsfiddle.net/q46L1ynv/
In my application I have the Iframe that has some log file content. Since I will always be interested in the latest logs. I always want to keep the scroll bar to the bottom. How can I achieve it.
<IFRAME src="/results/show_client_log?testinstanceId=<%=params[:testinstanceId]%>&clientIp=<%=params[:clientIp]%>" id= "frame" style="width:100%;" height=500px scrolling="yes"></IFRAME>
This the code that enables the scrollbar to iframe.
Does adding this to style section in your iframe work?
overflow: auto;
or maybe even
overflow-x:scroll;
or
overflow-y:scroll;
There is a way to align the scroll bar from an iframe to right? its by default to left.
any idea?
take a look here i wanna see the search box when i load the page!
i have an application that has an ifram, in the ifram I'm loading a website that the search box is on the upper right, and i want that when the page loads i should be able to see the search box right away without having to scroll to the right.... something not clear?
can you use jquery? if yes, you can do the following:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>This is some text. This is some text. This is some text.
<div id="frame" style="width: 200px; height: 200px; overflow: scroll";>
<iframe src="http://www.w3schools.com/default.asp" width="1024" height="768" scrolling="no">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
This is some text. This is some text. This is some text.</p>
<p>The align attribute was deprecated in HTML 4, and is not supported in HTML 4.01 Strict DTD or in XHTML 1.0 Strict DTD. Use CSS instead.</p>
<script type="text/javascript">
jQuery(document).ready(function () {
$("#frame").scrollTop(10).scrollLeft(750);
});
</script>
</body>
</html>
If you copy and paste the code into a html file and open it in your browser, you'll see that the iframe is automatically scroll to the very right.
The key changes are:
import jquery in your html file
add scrolling="no" to your iframe
specify the width and height of your iframe, it should be roughly the same as the actualy width & height of the embedded page
wrap your iframe in a <div>, be sure to specify the width & height (less than the iframe width & height)
add the javascript code before the closing </body> tag
<script type="text/javascript">
jQuery(document).ready(function () {
$("#frame").scrollTop(10).scrollLeft(800);
});
</script>
I am using an IFrame to make show some content from some other domain. The problem is that I can use a specified height and width (which I am using) and the content inside the IFrame cannot be accommodated completely in the IFrame. Hence, I need scrollbars.
I used the following html code -
**<iframe style = "overflow-x:scroll; overflow-y:scroll;" src = "http://shopsocial.ly/merchant/fanpage?merchant_name=cafepress"
height = "400" width = "500">**
This works fine in Firefox. But in Chrome I'm not getting any scrollbar in the IFrame. I have searched this problem and have tried many things all of which did not solve my problem. Can someone help me with this?
In your iframe content add inline:
<body style="overflow:auto;">
or in the css file attached to the iframe
html, body {
overflow:auto;
}
and of course as recommended by Tom make sure you use scrolling="yes" and style="overflow:visible;" on the iframe:
<iframe scrolling="yes" src="http://example.com" style="overflow:visible;"></iframe>
If it still does not work then try to wrap the iframe like this:
<div style="overflow:visible; height:400px;">
<iframe scrolling="yes" src="http://example.com" style="overflow:visible; height:2000px;"></iframe>
</div>
Instead of using the CSS style you could use the scrolling property of the iframe and set it to yes (i.e. always display scrollbars):
<iframe scrolling="yes" src="http://domain.com" height="400" width="500"></iframe>
Yap Tom is absolutely right you can use
<iframe style="overflow:visible; width:400px; height:400px;" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="yourfile.html"></iframe>
and it should be work as i have tested.
If it still does not work then update Chrome to latest version. :)
To make this scrollable on all mobile devices (specially iPhone devices), you will need to add CSS to the div around the iframe:
<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe scrolling="yes" src="http://example.com" height="400" width="500">Loading...</iframe>
</div>