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.
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 hoping you can help!
I am using this plugin http://manos.malihu.gr/jquery-custom-content-scroller which works great. The problem I am finding is that I am embedding youtube/vimeo clips (iFrames) within the scoller, which works fine, except for the fact that the mousewheel scroll doesn't work when the mouse is over the iFrame.
I suppose the javascript scroll event isn't being fired because the browser thinks I am trying to scroll within the iFrame? Is there any way around this? Hope I have explained this well... Basically I want to scroll down the scroller whether the mouse is over an iFrame or not, but still be able to click on them.
To resolve this issue, define a mousewheel event handler inside your iframe.
<iframe src="#" onmousewheel=""></iframe>
I am working on a Facebook app and have run into a situation where being able to capture whether or not the mouse has left the app's iframe would be really great info to have. I've tried playing with window.blur() and window.focus() in jquery but (for reasons regarding how my content renders at the moment) this only works in Firefox. I have considered using mousemove() to capture the x and y position of the mouse but it would appear that once the mouse leaves the iframe I'm out of luck.
tl;dr I have an iframe that I have control of and a page it's embedded into that I don't. I need to capture the mouse movement/click/whatever outside my iframe and want to know if that's actually possible. Thanks!
I went with a combination of Martin and qwertymk's solution to the issue. I'd check you guys off as answering the question but since you can't approve of comments this will have to do. Thanks all.