...without limiting the scroll inside the iframe or the need to specifically name the scrollable elements.
I have a google-map-like widget that can be embedded in 3rd party websites in the form of an iframe embed code. When people use mouse wheel over my widget I want only the content of the widget to scroll and not the parent page.
My question is similar to How to prevent page scrolling when scrolling a DIV element? but my problem is that my ifrmae contains multiple elements including media and canvas that must keep listening to mouse wheel event. TLDR the solution to use e.preventDefault() and manually update the scrollTop property of all elements inside the iframe that should stay scrollable is impractical, error prone and dependent on the non-standard wheelDelta property.
Here is a JS Bin for your convenience. Thank you.
While scrolling inside an iframe, the body doesn't know anything about what happens there. But when iframe scroller reach the bottom or the top, it pass scrolling to body.
See my jsFiddle and console log there.
Related
On mobile web browser when keyboard springs up it covers up the input fields on this iFrame. Normally content is pushed up but this Iframe is absolutely positioned to cover the whole screen with transparent background. http://learntoad.com/
using position:fixed instead of absolute allowed me to create a screen overlay iFrame, I did have to use an event listener messenger to adjust the ZIndex during the time the overlay was displayed and adjust it back after close.
http://bartoosterveer.nl/stageverslag/
As you can see the first page that loads is completely responsive, when resizing the text pushes down the portfolio section without any problems.
However when clicking "leerdoelen" "over jkv" or "werkwijze" it gives me an instant scrollbar, or a scrollbar when resizing. I want it to look like the first page.
Do not use the object an element to embed your content. You can do it with jQuery if you must (http://api.jquery.com/load/).
But I would stay away from that altogether: if you add content this way to an element without using fixed dimensions, its parent might not be aware of the size of the content and will not be able to make it fit (hence the scrollbar on overflowing content).
I would suggest to keep using jQuery for transitions but keep all of the content on a single page. Much easier for you.
I am trying to position an element in the same way as a jQuery-UI dialog.
When a dialog is opened, it sits nicely wherever you have specified its position to be (relative to the viewport). If however you scroll the page, the dialog moves along with the rest of the page content.
How is this done with CSS?
To clarify - the element I wish to position is hidden and I show it using $("#element").show();
I want it to appear in relation to the viewport and to behave just as a dialog does (will then move as you scroll the page).
Use position:fixed; on the dialog box, then use top and left to position is where you need. This way, it will scroll with the page.
A fixed position will cause the dialog to remain in the same place on your browser's screen, even if you scroll. CSS:
position: fixed;
An absolute position will cause the dialog to stay in the same place in relation to your content, so when you scroll up it will move up with your content. CSS:
position: absolute;
Here is an example of both: http://jsfiddle.net/sRkbf/
Reading up on UI dialog, they use the UI position() plugin. I imagine that they scroll with the page when they are modal.
I have close enough to what I want by using the same. I have "alerts" for both a dialog and for the page itself. For the dialog alerts, I used position() to place the alert in the center of the dialog and the center of the viewport for page alerts. Their position is fixed, but since they are precisely placed its ok.
It would be nice to be able to display an element in relation to the viewport and then have it scroll with the page, like a mix of absolute and fixed, but I have not been able to find anybody who has done it.
I have been playing around with -webkit-overflow-scrolling:touch; for a while and I getting randomly the following problem:
I only need scroll top/bottom ( width is fixed ), but sometimes the user needs to scroll left and right to
trigger the vertical scroll.
In other words, the user has to scroll horizontally to make the container scroll vertically.
again it is random, some times it just works.
I already have check all the relative positions for the child elements within the scroll.
any thoughts ?
I had as well a scroll that never broke and by looking at the html inside it I realised that if you apply the -webkit-overflow-scrolling:touch; in ul element it will never break.
the scroll that used to break had many elements within it and all I had to do was make the ul elements scrollable separately.
cheers
Ran into the same problem, been struggling with it forever until I did this:
Changed overflow-y: scroll to overflow: scroll. I've loaded up the page close to 20 times now and haven't experienced the left/right going up/down weirdness.
I work on a complex web application that uses multiple iframes. I have a window.setInterval setup that removes native scrolling from hidden iframes and adds it to the visible iframe. This works great except I experienced the same issue where I had to swipe left / right to scroll up down. I noticed if you opened or clicked on a different browser tab and then clicked back it fixed itself. We fixed our issue by adding the following jQuery after we apply the native scrolling to the visible iframe:
$(window).height($(window).height());
I am thinking this must force a repaint similar to clicking on a different tab and then clicking back does. Hopefully this helps someone in a similar situation!
As stated in the comments by Graygilmore. This worked for me:
// NOTE 2019-04-09: [referenced link was removed]
Make sure no parent element of the scrollable area is visibility:hidden or display:none.
Hello I have an app where there is a top menu and a sidebar and an iframe all nested in a table. I know old school but that wasnt my decision.
I want the Iframe to fill the page based on the content length eliminate the iframe scrollbar and use the browser scrollbar to scroll.
Should I use javascript? can I just set everything to height 100% and then a specific overflow rule.
Right now I just have a min height on the iframe of 700px and a height of 100%
Depending if you want to the iframe to postback or not, you might be better off using the jquery .load() method, with this you could do the following
$(document).ready(function(){
$('#mydivid').load('anypage.html')
});
Doing this will eliminate the need to have an iframe altogether and might save you some hassle.
Alternatively if you wish to use the iframe you will need to calculate the height of the iframes content.
You can do this like so:
$(document).ready(function(){
var iframeheight = $('#myiframeid').find('body').height()
$('#myiframeid').height(iframeheight + 100)
});
You may need to run this after document ready as the iframe content may not complete loading when the $(document).ready() fires.