Js/css: отключить полосу прокрутки, но сохранить положение прокрутки

Я использую диалоговое окно JQuery, чтобы открыть всплывающее окно сверху страницы. Когда я открываю диалоговое окно, я хочу, чтобы общая прокрутка страницы была отключена. Для этого я делаю:

$('body').css({overflow:'hidden'});

когда откроется диалог, и:

$('body').css({overflow:'auto'});

когда диалог закрывается.

Это работает, но когда панель прокрутки удаляется, содержимое в спине перемещается вправо, и результат не является приятным.

Я попробовал другой метод, создав класс css "noscroll", как таковой:

body.noscroll
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

то вместо предыдущего js-кода я добавляю и удаляю этот класс в тело в диалоговом открытии/закрытии.

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

Таким образом, в основном метод1 перемещает содержимое вправо, а метод2 возвращает содержимое назад.

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

Ответ 1

Я сделал довольно простой пример моего решения.

http://jsfiddle.net/6eyJm/1/

Ваше всплывающее окно должно быть в поле

<div id="shadow">
<div id="popup">
    <a id='close' href="#">Close</a>
</div>

Затем поместите эти CSS в корень div

#shadow{
    display: none;
    position: fixed;
    top:0;
    bottom: 0;
    width: 100%;
    height:100%;
    background-color: rgba(0,0,0,0.6);
}

Фиксированная позиция действительно важна, так как вы не хотите видеть белую рамку, она будет иметь полную ширину окна, а не тело.

Тогда есть небольшой трюк JS

$('#open').click(function(e){
    e.preventDefault()
    $('body').width($('body').width());
    $('body').css('overflow', 'hidden');
    $('#shadow').css('display', 'block');
})
$('#close').click(function(e){
    e.preventDefault()
    $('body, #shadow').removeAttr('style')
})

Цель состоит в том, чтобы снять ширину тела перед удалением полосы прокрутки. Ваш контент не будет перемещаться.

Надеюсь, что это поможет!

Извините за мой английский, а не за мой родной язык.

Ответ 2

Вспоминая смещение, вы должны держать всплывающее окно в ожидании,

JSfiddle

HTML

<div id="popupholder">
    <button id="close">Close me</button>
</div>


asd <br />asd <br />asd <br />asd <br />asd <br />
<button class="open">Popup</button>
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd<br />
<button class="open">Popup</button>
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />
<button class="open">Popup</button>
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd<br />
<button class="open">Popup</button>
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />

CSS

html, body {
    margin: 0px;
}

#popupholder {
    width: 100%;
    height: 100%;
    position: absolute;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    background-color: rgba(0,0,0,0.75);
    display: none;
}

#close {
    display: block;
    height: 20px;
    margin: 75px auto 0px auto;
}

JavaScript

$(document).ready(function() {
    $('.open').click(function() {
        // Block scrolling
        $('body').css('overflow', 'hidden');

        // Show popup
        var offset = window.pageYOffset;
        //console.log(offset);
        $('#popupholder').css({
            'display': 'block',
            'top': offset + 'px'
        });
    });

    $('#close').click(function() {
        // Enable scrolling
        $('body').css('overflow', 'auto');

        // Hide popup
        $('#popupholder').css('display', 'none');
    });
});

По соображениям безопасности вы можете добавить очень высокий z-index к вашему #popupholder, но это не имеет особого отношения к вопросу.

Ответ 3

вы можете рассчитать разницу между шириной тела до и после скрытия переполнения и применить его как дополнение к тексту тела

var bodyStartW = $("body").width();
$("body").css("overflow-y" , "hidden");
var bodyEndW = $("body").width();
var bodyMarginL = bodyEndW - bodyStartW;
$("body").css("padding-right" , bodyMarginL);

В Safari у вас был тот же трюк для тега "html", а margin-right вместо padding-right