01.12.2019, 09:03
|
 |
Аспирант
|
|
Регистрация: 04.05.2019
Сообщений: 80
|
|
|
Помогите использовать функцию 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();
});
Заранее, благодарю!
|
|
01.12.2019, 09:26
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Вместо $("body").css("position","fixed").css("top", scrtop);
$("html").css("overflow","hidden");
и
$("html").css("overflow","auto");
соответственно. А фиксировать окно.
|
|
01.12.2019, 09:39
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от ozoro
|
|
При закрытии модального окна происходит скролл наверх страницы.
|
type="button" в кнопке закрыть есть? |
|
01.12.2019, 09:46
|
|
Аспирант
|
|
Регистрация: 04.05.2019
Сообщений: 80
|
|
laimas,
Сделал как сказал
//открытие модального окна
$(document).on("shown.bs.modal", ".modal", function () {
$("html").css("overflow","hidden");
});
// закрытие модального окна
$(document).on("hidden.bs.modal", ".modal", function () {
$("html").css("overflow","auto");
});
Но это не помогает, при открытии страница на месте, а при закрытии окна все равно скролится в самый верх.
|
|
01.12.2019, 09:50
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Кто скролится, окно? Если оно вызывается в любом месте страницы, то оно фиксируется либо к верхнему краю, либо по центру вертикали. А overflow hidden/auto, это запрет скролла документа, чтобы после закрытия окна была прежняя позиция.
|
|
01.12.2019, 09:50
|
|
Аспирант
|
|
Регистрация: 04.05.2019
Сообщений: 80
|
|
Сообщение от рони
|
|
type="button" в кнопке закрыть есть?
|
Да, есть... но окно закрывается не только по кнопке, но и по клику за пределами окна. |
|
01.12.2019, 09:52
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Да какая разница как оно закрывается, кнопкой, щелчком вне его, ESC ...
|
|
01.12.2019, 09:53
|
|
Аспирант
|
|
Регистрация: 04.05.2019
Сообщений: 80
|
|
|
Сообщение от laimas
|
|
Кто скролится, окно? Если оно вызывается в любом месте страницы, то оно фиксируется либо к верхнему краю, либо по центру вертикали. А overflow hidden/auto, это запрет скролла документа, чтобы после закрытия окна была прежняя позиция.
|
В том то и дело, после закрытия окна не остается преждняя позиция, а страница скролится наверх, то есть как после ctrl+F5 |
|
01.12.2019, 10:21
|
|
Аспирант
|
|
Регистрация: 04.05.2019
Сообщений: 80
|
|
|
Сообщение от laimas
|
Вместо $("body").css("position","fixed").css("top", scrtop);
$("html").css("overflow","hidden");
и
$("html").css("overflow","auto");
соответственно. А фиксировать окно.
|
так заработало, не знаю почему до этого не сработало 
Подскажите еще, как сделать чтобы контент элементы не сдвигались вправо когда пропадает скролл? |
|
01.12.2019, 10:40
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
<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
|
|
как сделать чтобы контент элементы не сдвигались вправо когда пропадает скролл?
|
Никак, это увеличивается размер клиентской области, за счет размера полосы прокрутки. Добавить телу отступ справа? Ну так будет пустая область.
|
|
|
|
