I have an element inside of a page with scollbars, which is brought into view on page load via JS call to element.scrollIntoView() - and this works fine, as expected.
Now, if I place this page into an IFRAME, the call to element.scrollIntoView() not only brings element inside of iframe to the top of iframe - if the parent page has scrollbars of its own - it scroll the parent page as well to bring the element in question to the top of parent page as well.
I understand this is probably behavior by design, but is there a way to contain "scrollIntoView" behavior to the IFRAME only, or are there any alternatives to have this behavior (without affecting the parent page).
Figured it out. I can set element's parent's scrollTop to element's own offsetTop. This will make parent scroll to element's position and effect will be local to IFRAME.
The above solution will indeed work but you wouldn't be able to apply smooth scrolling behaviour. Ran into the same issue and figured you can actually fix by using scrollTo, and then you'd be able to add a smooth scrolling.
Assuming container, and element are respectively the DOM elements for the fixed size container and the element you want to scroll to:
container.scrollTo({
top: element.offsetTop,
behavior: 'smooth',
})
It's then up to you to choose whether you want to get the given DOM elements using jQuery or references.
I had a similar problem, element.scrollIntoView() in an iframe was causing the parent page to scroll on my iPad / Safari
I put the following script in the iframe, around the scrollIntoView to fix:
var savTop=parent.document.documentElement.scrollTop;
document.getElementById('elementID').scrollIntoView();
parent.document.documentElement.scrollTop=savTop;
How about this:
window.parent.scrollTo(0,0);
Related
Is it possible to use the parent scroll when I start the scroll from the embedded iframe? Currently I'm using pointer-event: none but the embedded iframe prevents clickable events. I tried also manipulate other events like touchmove but I failed. Feel free to answer and thank you in advance!
It's not possible to scroll the parent page from an iframe. However, you could consider using embed instead of iframe. This will give you more control over how scroll works.
On my page I have iframe that contains some divs with scrollbars:
http://jsfiddle.net/gdx6L940/
The iframe's content is from another domain, so I do not have access to its content via DOM.
How can I block mouse-wheel scrolling of the iframe and its content? What I want to achieve is that mouse-wheel scroll will always scroll the parent page, even if the cursor is over the iframe.
EDIT
I made a little bit more real-world example:
http://jsfiddle.net/gdx6L940/2/
I want to prevent the inner iframe's divs (facebok feed) from scrolling with mouse wheel.
EDIT
To make sure: I do not want to disable scrollbars on IFRAME element nor block all events completely. I would like to block only mouse-scrolls, but preserving the ability to click
I believe that you can simply set another div element over the existing one and then put the transparency of that at 100%. that may not be the correct way of achieving your goal but it should work. I'll test it and make edits if necessary
I think I got to do partially what you want
use the code to prevent the browser from scrolling inside the div (that is inside you iframe)
window.addWheelListener(div_el, function(e) {
console.log(e.deltaY);
e.preventDefault();
})
the working example and addWheelListener code is in my jsfiddle here
You can catch mousewheel event
iframe.contentWindow.document.onmousewheel=function(event){
event.preventDefault();
};
Just did some more research and it would appear that what you are trying to do is just not possible to do the way you want to do it.
also possible duplicate of
HTML iframe - disable scroll
I'm having the following issue - I have a webview in which I load an iframe which content document i modify(insert text into) via javascript. The thing is that when the content becomes too much(the webview becomes scrollable) and when the user scrolls the touch events won't be handled correctly - i.e the user will tap somewhere and the cursor will appear on an inappropriate position or won't appear at all. This behaviour isnt observed when no iframe is present.
Any ideas as to how to solve this issue are welcome.
The problem is likely due to double-scrolling.
Since the iFrame has more content than it can handle, touch events are used to scroll the iFrame. But the webview itself can also scroll, so there's a lot of potential for weird behavior.
Consider what will happen when the iFrame content hits an edge (user has scrolled all the way up or down the iFrame). What should happen if the user continues to scroll the iFrame? Should it do nothing and eat the event? Bounce the iFrame scroll content? Pass the event to the webview so it can scroll instead?
This is an ambiguous situation. The way Android reacts may not be consistent based on different touch gestures, and may even vary from one version of Android to another.
You're better off either avoiding the iFrame and simply modifying the webview contents directly, or giving the iFrame 100% height and 100% width so that it takes up the entire webview.
This will avoid scrolling conflicts, and Android should stop being confused about where to put the cursor.
Set a fixed height for your iframe. <iframe ... scrolling="no" height="150px">
Apply iScroll on the containing div within your iframe.
iScroll is available here:
https://github.com/cubiq/iscroll
Here's a demo of iScroll in action:
http://cubiq.org/dropbox/iscroll4/examples/simple/
I'm using a Javascript scroller class on a site that seamlessly takes care of adding a scrollbar to all predefined elements on the page that have overflown content. The client has recently asked that one of these elements contain an iframe so they can easily add interactive content to this area. (I know I know, iframes, but I'm a subcontractor on this job. Not much pull.) Fortunately the content of the iFram is being pulled from the same domain, so I'm able to resize the iframe once the content loads, in turn firing the Javascript scrollbar. In the end it works beautifully—in Chrome.
In Explorer and Firefox the iframe seems to be stealing mouse events as soon as the mouse is over the iframe. So the mousewheel event no longer works. You can still drag the scroll handle to scroll, or click anywhere on the scroll track, but using the mousewheel does nothing. It doesn't even fire the event.
I've seen that others have had similar issues, but haven't found a workaround. Anyone have any suggestions?
Here's the Scroll class for good measure: http://hastebin.com/xisidogiju.coffee
Appreciate any help I can get!
Mouse events are tied to windows, iframes are windows. Its a miracle this works in webkit browsers as you say.
You need to pass the eventListener and perhaps eventHandler between your parent window and the iframes when the mouse moves into them.
Some reference about passing objects between iframes: http://www.dyn-web.com/tutorials/iframes/refs.php.
I could just manage to overcome this problem. You can check the solution mentioned in the jsfiddle mentioned below.
http://jsfiddle.net/6nnMV/358/
Here, I have created a event to listen to the mouse scroll and have binded the event to the iframe.
You can then scroll the parent window or element by using the scrollTop property like
$(element).scrollTop($(element).scrollTop+(number of pixels));
This will only work when the iframe you are accessing is in the same domain.
I have some internal link which shows different content.
Everytime I click the internal links the browser scrolls to a position.
What I need to do is to force it to scroll to the top.
For example:
Click Here
It will show a certain div which is fine but I also need it to scroll to the top.
Is this possible?
Not sure of the exact methods right now, but something like this should work:
$('a').on('click', function(e) {
e.preventDefault();
// do your js stuff
$(window).scrollTop(0);
});
Do your links have JS code associated to the click event? Maybe you're stoping it's propagation and that is why they don't scroll your page.
If your link has an href value of "#" and you don't stop the propagation of the event (either by returning FALSE from your handler method or by using the stopPropagation method), then you should be set...
Sorry, the link doesn't work (if it was meant to be a link).
A little clarification--Are you trying to get the window to scroll the div to the top of the view, or have the window remain scrolled to the top of the viewport?
A link or code sample would be helpful...
If you're just trying to link to the top of the page,
Back to Top
should do the trick.