Простая прокрутка jQuery

У меня есть более чем 2000 пикселей прокрутки содержимого на странице.

Если пользователь нажимает div, прокручиваемый контент появляется в простом окне. Теперь мой клиент хочет сделать исходную страницу без прокрутки во время модального окна. (Конечно, модальная должна быть еще прокручиваемой.)

Возможно ли это?

Изменить: я пробовал ваши предложения. В основном это работает, но проблема немного сложная:

$(".foReadMoreLink a").click(function(){
    if ($('#modalBox').length == 0)
    $('body').append('<div style="display:none" id="modalBox"></div>')
    $('body').css({'overflow':'hidden'});
    $.post('jquery/loadarticle.php',{id:$(this).attr('id')},function(data){
        $('#modalBox').html(data).modal({overlayClose:'true'});
    })
    return false;
});

Я использую return false для ссылок, поэтому боты и пользователи без JavaScript (да, это 2%) могут открывать статьи. С приведенным выше кодом он работает так, как ожидалось, но после закрытия модальности мне нужно вернуть полосу прокрутки, но этот код не будет работать:

$(".foReadMoreLink a").click(function(){
    if ($('#modalBox').length == 0)
    $('body').append('<div style="display:none" id="modalBox"></div>')
    $('body').css({'overflow':'hidden'});
    $.post('jquery/loadarticle.php',{id:$(this).attr('id')},function(data){
        $('#modalBox').html(data).modal({onClose:function(){$('body').css({'overflow':'auto'})},overlayClose:'true'});
    })
    return false;
});

Ответы

Ответ 1

В вашем script, чтобы открыть ваш модальный:

$("html,body").css("overflow","hidden");

И при закрытии:

$("html,body").css("overflow","auto");

(HTML и тело требуются, поскольку полосы прокрутки привязаны к различным частям браузера, в зависимости от того, что вы используете)

Ответ 2

Включение и отключение полос прокрутки приведет к смещению содержимого, и наложение больше не будет закрывать все окно. Вот как это исправить.

var oldBodyMarginRight = $("body").css("margin-right");
$.modal(iframe, {
    onShow: function () {
        // Turn off scroll bars to prevent the scroll wheel from affecting the main page.  Make sure turning off the scrollbars doesn't shift the position of the content.
        // This solution works Chrome 12, Firefox 4, IE 7/8/9, and Safari 5.
        // It turns off the scroll bars, but doesn't prevent the scrolling, in Opera 11 and Safari 5.
        var body = $("body");
        var html = $("html");
        var oldBodyOuterWidth = body.outerWidth(true);
        var oldScrollTop = html.scrollTop();
        var newBodyOuterWidth;
        $("html").css("overflow-y", "hidden");
        newBodyOuterWidth = $("body").outerWidth(true);
        body.css("margin-right", (newBodyOuterWidth - oldBodyOuterWidth + parseInt(oldBodyMarginRight)) + "px");
        html.scrollTop(oldScrollTop); // necessary for Firefox
        $("#simplemodal-overlay").css("width", newBodyOuterWidth + "px")
    },
    onClose: function () {
        var html = $("html");
        var oldScrollTop = html.scrollTop(); // necessary for Firefox.
        html.css("overflow-y", "").scrollTop(oldScrollTop);
        $("body").css("margin-right", oldBodyMarginRight);
        $.modal.close();
    }
});

Ответ 3

Использование

overflow:hidden

Примените его к странице при открытии модального диалога и удалите его, когда диалог будет уничтожен. Это скроет вашу полосу прокрутки.

Ответ 4

Я нашел overflow:hidden не так хорошо, потому что он скрывает содержимое за полупрозрачным наложением, если страница прокручивается наполовину.

Я придумал следующее, довольно сложное решение. Это отключает прокрутку всеми возможными обнаруживаемыми способами, которые я нашел. И помещает прокрутку прямо в прежнее положение, если страница все равно прокручивается.

var popupOpened = false;

function openPopup()
{
    popupOpened = true;

    //catch middle mouse click scrolling
    $(document).bind('mousedown',disableMiddleMouseButtonScrolling);

    //catch other kinds of scrolling
    $(document).bind('mousewheel DOMMouseScroll wheel',disableNormalScroll);

    //catch any other kind of scroll (though the event wont be canceled, the scrolling will be undone)
    //IE8 needs this to be 'window'!
    $(window).bind('scroll',disableNormalScroll);

    $("#layover").css({"opacity" : "0.7"}).fadeIn();
    $("#popup").fadeIn(300,function()
    {
        //use document here for crossbrowser scrolltop!
        oldScrollTop = $(document).scrollTop();
    });
}

function closePopup()
{
    popupOpened = false;
    $("#layover").fadeOut();
    $("#popup").fadeOut(300,function(){
        $(document).unbind('mousedown',disableMiddleMouseButtonScrolling);
        $(document).unbind('mousewheel DOMMouseScroll wheel',disableNormalScroll);
        $(window).unbind('scroll',disableNormalScroll);
    });
}

function disableMiddleMouseButtonScrolling(e)
{
    if(e.which == 2)
    {
        e.preventDefault();
    }
    return false;
}

function disableNormalScroll(e)
{
    e.preventDefault();
    $('html, body').scrollTop(oldScrollTop);
    return false;
}

Ответ 5

Эта опция работает как шарм:

document.documentElement.style.overflow = 'hidden';

Ответ 6

В моем случае в теге <a> param href = "#". Таким образом, решение:

href="javascript:void(0);"