Форум

ozoro · #11 (**permalink**) 01.12.2019, 10:44

laimas,
рони,

Сообщение от ozoro

так заработало, не знаю почему до этого не сработало

Подскажите еще, как сделать чтобы контент элементы не сдвигались вправо когда пропадает скролл?

Подскажите, как динамически вычислять сдвиг контента, чтобы добавить в html для компенсации места, занимаемого скроллом?

$("html").css("overflow","hidden").css("padding-right","17px");

Ведь не у всех браузеров полоса прокрутки = 17px, особенно у мобильных.

ozoro · #12 (**permalink**) 01.12.2019, 10:55

Сообщение от laimas

[HTML run]<html>
Никак, это увеличивается размер клиентской области, за счет размера полосы прокрутки. Добавить телу отступ справа? Ну так будет пустая область.

А здесь по какой причине не остается у тела отступ справа при открытии окна?
https://getbootstrap.ru/docs/v4-alpha/components/modal/

laimas · #13 (**permalink**) 01.12.2019, 10:56

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
body {
    margin: 0;
}
.overlap {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #00000055;
    z-index: 100;
}
.modal {
    position: fixed;
    width: 400px;
    height: 200px;
    top: -200px;
    left: 50%;
    margin-left: -200px;
    background-color: #fff;
    border-radius: 0 0 10px 10px;
}
</style>
<script type="text/javascript">
$(function() {
    for(var i=1; i < 80; ++i) $('body').append('<p>'+i+'</p>');
    $('html').animate({
        scrollTop: 500
    }, 500, function() {
        $('<div class="overlap"><div class="modal"><button>Close</button></div></div>')
            .appendTo('body')
            .find('.modal')
            .animate({top: 0}, 500, function() {
                $(this).data({top: $(window).scrollTop()}) //запомнить позицию прокрутки
            })
            .find('button').click(function() {
                $(this).parent().animate({top: -200}, 500, function() {
                     $(window).scrollTop($(this).data('top')) //восстановить позицию прокрутки  
                    $(this).parent().remove()
                })
            })
    });
});
</script>
</head>
<body>
</body>
</html>

laimas · #14 (**permalink**) 01.12.2019, 10:57

Сообщение от ozoro

А здесь по какой причине не остается у тела отступ справа при открытии окна?

По той, что есть полоса прокрутки.

ozoro · #15 (**permalink**) 01.12.2019, 11:12

Сообщение от laimas

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
body {
    margin: 0;
}
.overlap {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #00000055;
    z-index: 100;
}
.modal {
    position: fixed;
    width: 400px;
    height: 200px;
    top: -200px;
    left: 50%;
    margin-left: -200px;
    background-color: #fff;
    border-radius: 0 0 10px 10px;
}
</style>
<script type="text/javascript">
$(function() {
    for(var i=1; i < 80; ++i) $('body').append('<p>'+i+'</p>');
    $('html').animate({
        scrollTop: 500
    }, 500, function() {
        $('<div class="overlap"><div class="modal"><button>Close</button></div></div>')
            .appendTo('body')
            .find('.modal')
            .animate({top: 0}, 500, function() {
                $(this).data({top: $(window).scrollTop()}) //запомнить позицию прокрутки
            })
            .find('button').click(function() {
                $(this).parent().animate({top: -200}, 500, function() {
                     $(window).scrollTop($(this).data('top')) //восстановить позицию прокрутки  
                    $(this).parent().remove()
                })
            })
    });
});
</script>
</head>
<body>
</body>
</html>

Как это применить в моем случае?

Сообщение от laimas

По той, что есть полоса прокрутки.

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

laimas · #16 (**permalink**) 01.12.2019, 11:29

Сообщение от ozoro

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

Уверены? Откройте страницу в отладчике и смотрите body. При появлении окна скрывается прокрутка и добавляется отступ справа. Не видно пустого места потому, что на этой странице справа ничего нет, а была бы к примеру шапка страницы, было бы заметно, хотя конечно, если ее позиционировать иначе, перекрывая тело документа....

laimas · #17 (**permalink**) 01.12.2019, 11:30

Сообщение от ozoro

Как это применить в моем случае?

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

ozoro · #18 (**permalink**) 01.12.2019, 12:00

Сообщение от laimas

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

А как оно будет работать, если таким образом нельзя это определить, на сколько px вниз проскроллена страница. Только если проскролить вниз и нажать F5, тогда определяет.

Проверь сам:

var scl = $(window).scrollTop();
console.log(scl);

при самом скроле значение не меняются

Поэтому и просил функцию помочь применить...

laimas · #19 (**permalink**) 01.12.2019, 12:10

Сообщение от ozoro

при самом скроле значение не меняются

В примере:

$(this).data({top: $(window).scrollTop()}) запоминает позицию прокрутки на момент открытия модалки и сохраняет ее в самой модалке. Что пользователю охота, смотреть содержимое модалки или скролить страницу, это модалке боком.

После закрытия окна, это (window).scrollTop($(this).data('top')) получает сохраненную позицию и прокручивает страницу к ней.

А вам чего хочется - раскрыть модалку, крутить скролл, запоминая его, чтобы потом получить последнюю позицию? А смысл, она и так будет на ней. И вообще в чем тогда смысл окна модального?

ozoro · #20 (**permalink**) 01.12.2019, 13:07

Сообщение от laimas

В примере:

$(this).data({top: $(window).scrollTop()}) запоминает позицию прокрутки на момент открытия модалки и сохраняет ее в самой модалке. Что пользователю охота, смотреть содержимое модалки или скролить страницу, это модалке боком.

После закрытия окна, это (window).scrollTop($(this).data('top')) получает сохраненную позицию и прокручивает страницу к ней.

А вам чего хочется - раскрыть модалку, крутить скролл, запоминая его, чтобы потом получить последнюю позицию? А смысл, она и так будет на ней. И вообще в чем тогда смысл окна модального?

Что-то не работает.

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

Нашел способ с помощью fixed. Но при этом при открытии модального окна страница стала прокручиваться в top: 0.
Поэтому, решил определять значение скролла - на сколько страница прокручена вниз и добавлять его отрицательное значение в top:.

Например, на 1200px вниз, то добавлять top:-1200px.

var scl = $(window).scrollTop();//определяем значение скрола, например, определилось 1200
var scrtop = "-"+scl+"px";//добавляем - и px, получается -1200px

//функция определения открытия модального окна
$(document).on("shown.bs.modal", ".modal", function () {
$("body").css("position","fixed").css("top", scrtop);// фиксируем body и делаем top:-1200px
});


//функция определения закрытия модального окна
$(document).on("hidden.bs.modal", ".modal", function () {
$("body").removeAttr("style").removeAttr("class"); //удаляем атрибуты style и class  
$(window).scrollTop(scl);//остаемся на той позиции, которая была при открытии окна, то есть .scrollTop(1200) 
});

Но это работает только если проскролить вниз, после нажать F5 - обновить страницу. Тогда при закрытии модального окна позиция тела остается как при открытии окна.

Вот эта функция определяет сразу при скроле значение
$(window).on("scroll", function() {
$(window).scrollTop();
});

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

Форум

Справочник

Discord чат

Курсы javascript