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
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.
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);
I want used the target css selector and anchor to manage tabs on my website, but i don't want modify my url. How can i prevent url rewriting?
It is possible to prevent scroll to element too? How?
I have tried intercept :
$('a[href^=#]').on 'click', (event)->
event.preventDefault()
but doesn't works.
It won't work because this way, or your link reacts on click and it brings you to your anchor, or it doesn't get the click and takes you nowhere.
The trick is to use an anchor the old way (<a id="anchor"></a>) right before or right inside the element you are targeting and set anchor in position:fixed;top:0;left:0; , this way your anchor always remain on top of screen and no scrolling is needed.
The problem is that your anchor becomes inefficient if content to reach is off screen and in normal flow. I guess you have a good reason to want to avoid your page to be jumpy :)
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.