Запрет фоновой прокрутки при отображении всплывающих окон

Ответ 1

Один из вариантов заключается в том, чтобы временно установить свойство overflow на hidden на body, что избавится от полос прокрутки, но вызывает небольшое мерцание при настройке страницы.

Другой выбор - нажать на событие $(window).scroll() и вернуть там ложь. Это также вызовет небольшое мерцание, поскольку браузер не реагирует так быстро на возвращаемое ложное утверждение.

Лучше всего переместить обработчики событий кликов в отдельный файл и выполнить привязку:

$(function() {
    $('.emailPost').click(function() {
        $(window).scroll(function() { return false; });
        pageTracker._trackPageview('/onclick/emailquote');            
    });
});

Это должно помешать прокрутке страницы. Не забудьте удалить привязку после закрытия диалогового окна, иначе страница больше не будет прокручиваться! Вы можете удалить привязки, используя:

$(window).unbind('scroll');

Ответ 2

скрыть полосу прокрутки тела при открытии всплывающего окна

       document.body.style.overflow = "hidden";

и верните назад при закрытии всплывающего окна

       document.body.style.overflow = "visible";

Ответ 3

Не используйте тег # в своих ссылках!

Он попытается прокрутить до якоря #, но поскольку он пуст, он будет прокручиваться до верхней части страницы.

Отредактируйте ваши ссылки:

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>

(обратите внимание на href="")

Ответ 4

Этот кодовый блок работает для мобильных устройств IOS, где проблема с прокруткой очень распространена.

$('body').on('touchmove', function(e) {
    if ($('.scroll-disable').has($(e.target)).length) e.preventDefault();
});
$('body').on('shown.bs.modal', function() {
    $(this).addClass('scroll-disable');
});
$('body').on('hidden.bs.modal', function() {
    $(this).removeClass('scroll-disable');
});