Это самое простое решение, которое я получил до сих пор. И поверьте мне, я попробовал все остальные, и это самый простой. Он отлично работает на устройствах с Windows , где страница сдвигается вправо, чтобы освободить место для системной полосы прокрутки и устройств IOS, которым не требуется место для их полос прокрутки в браузерах. Таким образом, при использовании этого вам не нужно добавлять отступ справа, чтобы страница не мерцала, когда вы скрываете переполнение тела или HTML с помощью CSS .
Решение довольно простое, если подумать. Идея состоит в том, чтобы дать window.scrollTop () ту же самую точную позицию в момент открытия всплывающего окна. Также измените эту позицию, когда размер окна изменится (так как позиция прокрутки изменяется, когда это происходит).
Итак, поехали ...
Сначала давайте создадим переменную, которая сообщит вам, что всплывающее окно открыто, и назовем его stopWindowScroll . Если мы этого не сделаем, вы получите ошибку неопределенной переменной на своей странице и установите ее в 0 - как неактивная.
$(document).ready(function(){
stopWindowScroll = 0;
});
Теперь давайте сделаем так, чтобы функция open popup могла быть любой функцией в вашем коде, которая запускает любое всплывающее окно, которое вы используете как плагин или пользовательский. В этом случае это будет простое настраиваемое всплывающее окно с простой функцией щелчка документа.
$(document).on('click','.open-popup', function(){
// Saving the scroll position once opening the popup.
stopWindowScrollPosition = $(window).scrollTop();
// Setting the stopWindowScroll to 1 to know the popup is open.
stopWindowScroll = 1;
// Displaying your popup.
$('.your-popup').fadeIn(300);
});
Итак, следующее, что мы делаем, это создаем функцию закрытия всплывающих окон, которая, повторяю, может быть любой функцией, которую вы уже создали или используете в плагине. Важно то, что нам нужны эти две функции, чтобы установить переменную stopWindowScroll в 1 или 0, чтобы знать, когда она открыта или закрыта.
$(document).on('click','.open-popup', function(){
// Setting the stopWindowScroll to 0 to know the popup is closed.
stopWindowScroll = 0;
// Hiding your popup
$('.your-popup').fadeOut(300);
});
Затем давайте создадим функцию window.scroll, чтобы мы могли предотвратить прокрутку, как только упомянутый выше stopWindowScroll установлен в 1 - как активный.
$(window).scroll(function(){
if(stopWindowScroll == 1) {
// Giving the window scrollTop() function the position on which
// the popup was opened, this way it will stay in its place.
$(window).scrollTop(stopWindowScrollPosition);
}
});
Это оно. Для этого не требуется CSS, кроме ваших собственных стилей для страницы. Для меня это сработало, и я надеюсь, что это поможет вам и другим.
Вот рабочий пример на JSFiddle:
Пример JS Fiddle
Дайте мне знать, если это помогло. С уважением.