Question

Long question: I have seen on Facebook that a single popup window (like those when you opens a question from someones feed) can affect the scroll behavior so it don’t scroll the main content but only the content in the popup window according to the height of it, of course. How can I do something like this?

Short question: How can I make the scroll “focus” on the contents height in the welcome DIV?

I’ve made it this far: http://jsfiddle.net/y3qV5/506/. I hope you understand what I mean 🙂

Thanks in advance.

Answer 1

You can add overflow: hidden to the body.

http://jsfiddle.net/y3qV5/520/

body.freeze { overflow: hidden; }

$('#pop').click( function() {
    $('.welcome').fadeIn();
    $('body').addClass('freeze'); 
});

$('#close').click( function() {
    $('.welcome').fadeOut();
    $('body').removeClass('freeze');
});

Old answer:
http://jsfiddle.net/y3qV5/519/

//bind on show
$('.welcome').fadeIn().bind('mousewheel DOMMouseScroll', function(e) {
    console.log('scroll');   
    var scrollTo = null;

    if (e.type == 'mousewheel') {
        scrollTo = (e.originalEvent.wheelDelta * -1);
    }
    else if (e.type == 'DOMMouseScroll') {
        scrollTo = 40 * e.originalEvent.detail;
    }

    if (scrollTo) {
        console.log('prevent');
        e.preventDefault();
        $(this).scrollTop(scrollTo + $(this).scrollTop());
    }
});   


//unbind on close
$('.welcome').fadeOut().unbind('mousewheel DOMMouseScroll');