У меня есть форма, которая отображается во всплывающем окне. После загрузки фон неактивен, но пользователь все равно может прокручивать фоновое содержимое вверх и вниз.
Как предотвратить прокрутку фона?
ссылку "Отправить эту цитату" справа от скриншота pdf.
Спасибо! Джо
Один из вариантов заключается в том, чтобы временно установить свойство overflow на hidden на body, что избавится от полос прокрутки, но вызывает небольшое мерцание при настройке страницы.
Другой выбор - нажать на событие $(window).scroll() и вернуть там ложь. Это также вызовет небольшое мерцание, поскольку браузер не реагирует так быстро на возвращаемое ложное утверждение.
Лучше всего переместить обработчики событий кликов в отдельный файл и выполнить привязку:
$(function() {
$('.emailPost').click(function() {
$(window).scroll(function() { return false; });
pageTracker._trackPageview('/onclick/emailquote');
});
});
Это должно помешать прокрутке страницы. Не забудьте удалить привязку после закрытия диалогового окна, иначе страница больше не будет прокручиваться! Вы можете удалить привязки, используя:
$(window).unbind('scroll');
скрыть полосу прокрутки тела при открытии всплывающего окна
document.body.style.overflow = "hidden";
и верните назад при закрытии всплывающего окна
document.body.style.overflow = "visible";
Не используйте тег # в своих ссылках!
Он попытается прокрутить до якоря #, но поскольку он пуст, он будет прокручиваться до верхней части страницы.
Отредактируйте ваши ссылки:
<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>
(обратите внимание на href="")
Этот кодовый блок работает для мобильных устройств 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');
});