Don't scroll webpage when reached bottom of iFrame

Question

When I reached the bottom of an iFrame / div with scrollbar, and keep scrolling down, the whole page will scroll down.

I made a quick JSFiddle to demonstrate the problem: http://jsfiddle.net/fbgxf771/1/

<div class="whole-page" style="height:2000px;"> 
    <iframe style="height: 100px;" src="http://example.com"></iframe>
</div>

Keep scrolling down on either the div or the iframe, when you reached the bottom, the whole page will scroll down.

How can I disable that?

Another way to phrase the question would be "how to disable scrolling on the parent when the focus is in a scrollable child element". Sounds interesting. — szupie, Feb 25 '15 at 19:37
You should always carefully consider whether you want to change this behavior. Assuming you have a device that only supports touch gestures and you block the scrolling of the page, you might then lock the user _within_ that `div`/ `iframe`. Generell you should exercise great care when you are altering the behavior of the scrollbar or scrolling as will most of the time badly hurt usability. — t.niese, Feb 25 '15 at 19:41
Related to: [How to disable scrolling temporarily?](http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily) — t.niese, Feb 25 '15 at 19:56

score 4 · Answer 1 · answered Feb 25 '15 at 19:54

You may aproach it this way

$('.inner-content-with-y-scroll').mouseenter(function(){
   $("body").css("overflow","hidden");
});
$('.inner-content-with-y-scroll').mouseleave(function(){
   $("body").css("overflow","scroll");
});

here is a fiddle:http://jsfiddle.net/m4feddh1/

score 0 · Accepted Answer · answered Mar 04 '15 at 19:38

$('.inner-content-with-y-scroll').on('DOMMouseScroll mousewheel', function(ev) {
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.height(),
        delta = (ev.type == 'DOMMouseScroll' ?
            ev.originalEvent.detail * -40 :
            ev.originalEvent.wheelDelta),
        up = delta > 0;

    var prevent = function() {
        ev.stopPropagation();
        ev.preventDefault();
        ev.returnValue = false;
        return false;
    }

    if (!up && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down, but this will take us past the bottom.
        $this.scrollTop(scrollHeight);
        return prevent();
    } else if (up && delta > scrollTop) {
        // Scrolling up, but this will take us past the top.
        $this.scrollTop(0);
        return prevent();
    }
});

did the trick

Don't scroll webpage when reached bottom of iFrame

2 Answers2