We Keep Coding

Don't propagate mouse wheel scrolling to IFRAME and its content

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

page gets scrolled to top when absolute positioned drop down is opened

I have notification drop down just like that of facebook. when clicked on link, this drop down is shown, which is positioned as absolute. problem is, when the drop down is opened, the page is getting scrolled to top. Unfortunately I cant paste code as its huge. can you guess what could be the problem.
Ok here is what I have. http://jsfiddle.net/testtracker/uuQf3/1/
first scroll down then click on black link, and see that, it scrolls up first then shows notification drop down.

As above said, anchor tag with # href attribute will take you to the top of page, the solution to this is
catch the onclick event and do this
$('a').click(function(e){
e.preventDefault();
//OR
return false;
});
this will restrict its default behavior.
or you can directly write it in your anchor element like this
link

Problem here is that your link is trying to find an anchor tag called #. This doesnt exist, so it scrolls to the top of the page. What you need is to tell the event handler to not do the default action of loading the href="#".
The solution is to add e.preventDefault() to your event handler.
See demo here:
http://jsfiddle.net/ksokhan/uuQf3/2/

Internal Link Force scroll to top of page

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.

Set div position fixed without page jumping up

I have a modal dialog (jquery.dialog) that opens up when a user clicks on a link. I want to hide the scroll bar on the page behind the dialog, so user will not be able to use it. This works perfectly fine with the overflow:hidden except older IE browsers that mess the entire page up when doing that.
So I came up with this to make it work in the IE: I created a div that was covering the entire content of the page and set it to position:relative and width/height:100%. Then anytime, the modal dialog opens up, the position gets set to fixed. That makes the overwflow:hidden work in old IE.
Now, the other problem came up. When the user is at the bottom of the page and clicks on the links, dialog pops up, but the main page jumps up to the top.
I want the main page to stay intact if possible. How can I do so?
Thank you.
The code to show/close the dialog:
show:
$('#allContent').css({ position: "fixed" });
$('#viewJobPanel').dialog('open');
$('#allContent').css('overflow', 'hidden');
close:
$('#allContent').css('overflow', 'visible');
$('#allContent').css({ position: "relative" });
$('#viewJobPanel').dialog('destroy');
and when user clicks on the link, I have this event handlers
e.preventDefault();
e.stopPropagation();

Use a span bound to a click event instead of an anchor element to avoid the default behavior of repositioning the top of the window.

Scroll dialog body but not the page below it

I have a dialog(with scrollable content body) on top of a page that's also scrollable. Now I want that when I try to scroll, from inside the dialog using mouse wheel, only the dialog body should scroll and not the page below it.
How do I do that ?

You could try wrapping all your content into a block with overflow: auto and set the overflow property of the window to hidden.
See example here.
I don't think you can prevent the window from scrolling otherwise. See similar question: prevent Scroll "bubbling" from element to window.
Another answer suggests you can prevent the mouse-wheel event's default effect: Prevent scrolling of parent element?. But it's not ideal as scrolling also occurs upon pressing keys, selecting text and so on.