Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.12.2019, 09:03
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 71

Помогите использовать функцию onscroll
Есть кнопка открытия модального окна ближе к низу страницы.
При закрытии модального окна происходит скролл наверх страницы.

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

Сделал вот так:
var scl = $(window).scrollTop();
var scrtop = "-"+scl+"px";

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

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


НО работает только если прокрутить до кнопки вниз и обновить страницу.
Динамически определить скролл не хватает знаний.

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

Вот эта функция:
$(window).on("scroll", function() {
$(window).scrollTop();
});



Заранее, благодарю!
Ответить с цитированием
  #2 (permalink)  
Старый 01.12.2019, 09:26
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,326

Вместо $("body").css("position","fixed").css("top", scrtop);

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

и

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

соответственно. А фиксировать окно.
Ответить с цитированием
  #3 (permalink)  
Старый 01.12.2019, 09:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,215

Сообщение от ozoro
При закрытии модального окна происходит скролл наверх страницы.
type="button" в кнопке закрыть есть?
Ответить с цитированием
  #4 (permalink)  
Старый 01.12.2019, 09:46
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 71

laimas,

Сделал как сказал
//открытие модального окна
$(document).on("shown.bs.modal", ".modal", function () {
$("html").css("overflow","hidden");
});

// закрытие модального окна
$(document).on("hidden.bs.modal", ".modal", function () {
$("html").css("overflow","auto");
});


Но это не помогает, при открытии страница на месте, а при закрытии окна все равно скролится в самый верх.
Ответить с цитированием
  #5 (permalink)  
Старый 01.12.2019, 09:50
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,326

Кто скролится, окно? Если оно вызывается в любом месте страницы, то оно фиксируется либо к верхнему краю, либо по центру вертикали. А overflow hidden/auto, это запрет скролла документа, чтобы после закрытия окна была прежняя позиция.
Ответить с цитированием
  #6 (permalink)  
Старый 01.12.2019, 09:50
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 71

Сообщение от рони Посмотреть сообщение
type="button" в кнопке закрыть есть?
Да, есть... но окно закрывается не только по кнопке, но и по клику за пределами окна.
Ответить с цитированием
  #7 (permalink)  
Старый 01.12.2019, 09:52
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,326

Да какая разница как оно закрывается, кнопкой, щелчком вне его, ESC ...
Ответить с цитированием
  #8 (permalink)  
Старый 01.12.2019, 09:53
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 71

Сообщение от laimas Посмотреть сообщение
Кто скролится, окно? Если оно вызывается в любом месте страницы, то оно фиксируется либо к верхнему краю, либо по центру вертикали. А overflow hidden/auto, это запрет скролла документа, чтобы после закрытия окна была прежняя позиция.
В том то и дело, после закрытия окна не остается преждняя позиция, а страница скролится наверх, то есть как после ctrl+F5
Ответить с цитированием
  #9 (permalink)  
Старый 01.12.2019, 10:21
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 71

Сообщение от laimas Посмотреть сообщение
Вместо $("body").css("position","fixed").css("top", scrtop);

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

и

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

соответственно. А фиксировать окно.
так заработало, не знаю почему до этого не сработало

Подскажите еще, как сделать чтобы контент элементы не сдвигались вправо когда пропадает скролл?
Ответить с цитированием
  #10 (permalink)  
Старый 01.12.2019, 10:40
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,326

<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: 1000
    }, 500, function() {
        $("html").css("overflow","hidden");
        $('<div class="overlap"><div class="modal"><button>Close</button></div></div>')
            .appendTo('body')
            .find('.modal')
            .animate({top: 0}, 500)
            .find('button').click(function() {
                $(this).parent().animate({top: -200}, 500, function() {
                    $("html").css("overflow","auto");
                     $(this).parent().remove()
                })
            })
    });
});
</script>
</head>
<body>
</body>
</html>


На месте же документ остается? Overflow для html потому, что среди плагинов sticky есть один (какой именно теперь не помню), который отказывается работать после разрешения прокрутки если overflow определять для body.

Сообщение от ozoro
как сделать чтобы контент элементы не сдвигались вправо когда пропадает скролл?
Никак, это увеличивается размер клиентской области, за счет размера полосы прокрутки. Добавить телу отступ справа? Ну так будет пустая область.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите разобраться со скриптом Валерий1996 Общие вопросы Javascript 7 13.07.2015 22:41
Помогите пожалуйста изменить функцию AntonMs Общие вопросы Javascript 1 23.05.2015 00:37
Помогите оптимизировать скрипт смены изображений с анимацией Khmelevsky Элементы интерфейса 5 06.03.2010 19:02
Можно ли использовать функцию в качестве свойства свободно позиционируемого объекта Newgen Общие вопросы Javascript 0 24.07.2009 23:02
Корректно ли использовать подобную функцию в XST шаблоне artwalek Общие вопросы Javascript 1 03.03.2009 20:07