0

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.

Airikr
  • 6,258
  • 15
  • 59
  • 110
  • Are you looking for something like this? http://stackoverflow.com/questions/7571370/jquery-disable-scroll-when-mouse-over-an-absolute-div/7571867#7571867 – mrtsherman Mar 16 '12 at 03:53
  • http://jsfiddle.net/y3qV5/515/ – mrtsherman Mar 16 '12 at 03:54
  • No but almost like that. When the popup window shows, the scroll will be disabled unless popup windows content is higher than the browsers visible space for the website. Please see this picture to illustrate how I mean: http://erik-edgren.nu/uploadit/images/be4e0e0cee02a7b3f6f2d4d94a1c4443.jpg – Airikr Mar 16 '12 at 04:32

1 Answers1

0

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');
mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • I have readed your comment in my question and the scroll does not disable the scroll for the content and enable the scroll for only the popup window as I showed you in the image I linked to. I suppose your function only works in Internet Explorer. I'm using Google Chrome. – Airikr Mar 16 '12 at 14:34
  • I see. Just add `overflow: hidden` to the body. – mrtsherman Mar 16 '12 at 14:45
  • Many thanks! But how can I make the popup windows scroll act like the regular scroll for the whole page, like on Facebook? I don't want to make the popup window feels like an iframe. – Airikr Mar 16 '12 at 18:25