I have an HTML page with an iframe like this:
<body>
<h1>Page</h1>
<iframe src="./randompage.html" frameborder="0" allowfullscreen></iframe>
</body>
However, the page itself scrolls and the iframe also scrolls. Is there a way to stop the page scrolling and have only the iframe which scrolls?
(Note that this is for a phonegap app)
Extra Information
It seems that body { overflow: hidden; } doesn't work on phonegap (see here: Phonegap and Android overflow issue).
I would try to make sure the content fits inside the viewport.
If that's not an option, trim the body by hiding the overflow.
body {
overflow: hidden;
}
Use overflow-y: hidden to stop your page from (vertical) scrolling. You could add this to your body like this
body{
overflow-y:hidden;
}
Look at this fiddle
If you want to disable both vertical and horizontal scrolling, you can use overflow: hidden;.
As overflow:hidden does not work in your case, you could, depending on your exact use case, make the iframe position:absolute and define it's position via left and top. This would mean the parenting page does not overflow beyond the viewport.
Related
I would like to hide the scrollbar if the the user is not scrolling, meaning if the user scrolls, the scrollbar should appear (only the scrollbar not the scroll track), while if the user does not scroll it should disappear. I sort of had that setup for a long time, but than I made some changes to my page and now the page always shows the scrollbar (if there is more content than one page can cover). Unfortunately I don't know what I did to make this feature go away? I played around with overflow in the css, but overflow: hidden just removes all scrolling possibilities. Here is a fiddle which shows my current setup
https://jsfiddle.net/jsmnsLm7/ (please make the window big, so that you can see all of the features of my navbar setup)
as you can see I use
overflow: hidden
in the body and
overflow: scroll
in the main.
thanks for your help
carl
try following css:
overflow:auto;
It worked for me :)
This will do what you're looking for
http://rocha.la/jQuery-slimScroll
Or you could just show the scrollbar when you hover over the area using CSS only;
This worked for me;
<style>
#ID {
overflow-y: hidden;
}
</style>
#ID:hover, #ID:active, #ID:focus {
overflow-y: auto;
}
</style>
<div class="ID"></div>
There isn't a way to do this outside of a scripting languege as far as I know, but the JavaScript you use for this is super simple.
Start off with a CSS style of:
#ID {
overflow: hidden
}
Then in your div in the HTML use this command
<div id="ID" onmouseover="this.style.overflow='scroll'"
onmouseout="this.style.overflow='hidden'"
this will cause your scroll button to appear when the user hovers over the div, but then disappear again when the user hovers away from the div.
If you are using bootstrap, it is pretty simple - There is a default Scroll class to which you can apply the style overflow: auto.
<div class="Scroll" style="overflow: auto" >
.......
</div>
Based on this https://stackoverflow.com/a/40857678/15992537 answer I made this:
.categorias::-webkit-scrollbar-thumb {
height: 6px;
background: #ff3d1d;
border-radius: 10px;
visibility: hidden;
}
.categorias:active::-webkit-scrollbar-thumb {
visibility: visible;
}
this worked in my case because my div is draggable, so the thumb shows when i drag and move it, but with JS you probably can make it apear based on events like page scroll for example.
use overflow: auto
The overflow property has the following values:
visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary
I have an index page that includes both a left and a right iFrame. For some reason on the second iFrame it shows a scroll bar for its iFrame and another scroll bar for the whole page.
I have been trying to remove the scroll bar for the whole page and just leave the scroll bars for the 2 iFrames only
When I go and change the css property to overflow hidden for the body,html element it also removes the scroll bar for both iFrams
I have even tried to set the iFrame element overflow-y: to auto and the body,html overflow to hidden.
That still didn't work.
The second issue I am having is that the iFrame does not extend all the way to the bottom of the page even when I specified the height to be a 100% .
I have been fiddling with the CSS but go no luck so far. I would appreciate it if anyone can try to help me out.
Below is the link to my webpage, and the css snippet. Thank you!!!
html,body{ height: 100%; margin:0;padding:0; }
iframe{
height:100%; margin:0;padding:0; border: 0;
}
http://15c04752.ngrok.com/simplemenu/menus/demo (Text might be rendered smaller in different browsers please hit ctrl+ cmd+ on your keyboard to get the scrolling to show)
To remove the scrollbar for the whole page, add this rule:
body, html {
overflow: hidden;
}
To enable scrollbars on the iframes, add this attribute:
<iframe ... scrolling="yes"></iframe>
Source
And that's how it looks like, if you add both:
There is no scrollbar for the whole page, no scrollbar for the left iframe (because the content is fully visible) and a scrollbar for the right iframe (because the content is not fully visible). If you make the windows smaller, the scrollbar for the left iframe will appear.
I had a similar issue when using an iframe. The element containing the iframe was not long enough to justify a second scrollbar; its just a youtube video taking up about 600 pixels in height so I did not need a second scrollbar. The fix for me was just
html, body { height: 100%; }
in CSS. If that doesn't help my next best guess is to use webkit to just visibly hide them if all else fails.
I have read the documentation over at skrollr. My site is wrapped in the
<div id="skrollr-body">
..site here...
</div>
And all my fixed elements are located below that, outside of those tags.
In my regular desktop view it works fine, but when I test it on a mobile, I can see that skrollr adds overflow:hidden; to both the body tag, and also the html tag.
if I add
html {
overflow:scroll !important;
}
I can scroll on the mobile, but all the skrollr functions break.
Why are these css rules being added to my elements, and what do I have to do (other than what I've already done) to get the page to scroll on mobile and still have the skrollr functions intact.
try:
body {
height: 100% !important
}
or
#skrollr-body {
min-height: 100%
}
Also, try to take out of #skrollr-body any fixed element like a bootstrap navigation bar.
I have a web page that is longer than the standard screen. When I open it in the browser there is no vertical side scroll bar that allows the user to move down the page. I tried using the line overflow:scroll; but it seems it is ignored. I have a header and a line of buttons, then the content is in three sections. I have the overflow:scroll within the first BODY line like this: body overflow:scroll class="plugin webkit chrome win Locale_en_US"
How do I force the scroll bar to appear and where should it be properly placed?
Sorry, it's been years since I've done html or any kind of coding so bear with me.
The overflow is a css attribute, meaning that it should be in a style tag, or even better, in an external css file ( http://www.w3.org/TR/html401/present/styles.html )
In your case it would be:
<body style="overflow: scroll" class="plugin webkit chrome win Locale_en_US">
Use css style='overflow: auto;'. If not works, find any element, that is overflow: hidden; and apply overflow: auto to it. Or add JSFiddle
i'm using this in my project, i created a css like this
div.scrolled {
width: 1150px;
height: 620px;
overflow: scroll;
}
and in my html file i only identify what area i want to introduce into my div and i do this
<body>
<div class="scrolled">
here goes wath you want
</div>
</body>
and you will have your scroll in 'y' align, hope i helped you
I'm trying to put an iframe into a webpage, but no matter what I try to put in either the iframe properties or the custom CSS section of the website builder (or how many times I try to add !important to anything from width to right-margin), I can't get the iframe to extend rightward further than the page's preset width.
Here's an example of the page and iframe that I'm working with: (Edit: no longer available)
I need that script/iframe to be wide enough to show the search area. It seems pointless to copy and paste code and attributes I've tried setting, because nothing I do seems to have any effect, but just for showing how much I have no idea what I'm doing, here's my iframe code:
<iframe id="idxFrame" style="padding:0; margin:0; padding-top: 0px; overflow-x:auto;
width:1000px!important; border:0px solid transparent; background-color:transparent;
max-width:none!important; right-margin:-200px!important" frameborder="0"
scrolling="on" src="http://www.themls.com/IDXNET/Default.aspx?wid=8MSsp7Pf9eI55yjkDuB%2blX5awn7LnnVXh5PNYhq2ImAEQL"
width="1200px" height="900px">
</iframe>
The "Website Builder" that I'm forced to use to make these kinds of pages is infuriating, but it does have a "Custom CSS" area where I can input additional CSS information. Is there something I could generically use to set iframes to their own widths?
The reason it is being cut off is because there are some parent containers in the page structure that have the attribute overflow: hidden; to ensure content that is too wide doesn't break the layout.
I don't know how your system works but you could try adding the following code to your Custom CSS area:
.LayoutContainer {
overflow: visible !important;
}
.LayoutContainer div div {
overflow: visible !important;
}
Be aware that it will mess with your layout and spawn a horizontal scroll-bar on smaller screens.
Update:
The above CSS would affect your entire website. If you really want to go through with it, use the following CSS instead to make sure only this page is affected. The system generates a unique ID number for every page and we're taking advantage of that.
body#page_33219e82-0110-40bb-a172-3d05dc78f406 .LayoutContainer {
overflow: visible !important;
}
body#page_33219e82-0110-40bb-a172-3d05dc78f406 .LayoutContainer div div {
overflow: visible !important;
}
I believe your problem is that your are using right-margin when you should be using margin-right
Here is what I modified to get it to work and here is a screenshot: http://screencast.com/t/R2VeIAnNJVd
.LayoutContainer { overflow: visible; }
.LayoutContainer div div { overflow: visible !important; }
As stated above and as seen in the screenshot, you can see that the iframe extends out past your content wrapper.