Я хочу, чтобы мое тело перестало прокручиваться при использовании колесика мыши, когда модал (с http://twitter.github.com/bootstrap ) на моем веб-сайте открыт.
Я попытался вызвать кусок JavaScript ниже, когда модал открывается, но безуспешно
$(window).scroll(function() { return false; });И
$(window).live('scroll', function() { return false; });Обратите внимание, что наш веб-сайт прекратил поддержку IE6, хотя IE7 + должен быть совместимым.
Ответы:
Bootstrap modalавтоматически добавляет класс modal-openк телу, когда отображается модальное диалоговое окно, и удаляет его, когда диалог скрыт. Поэтому вы можете добавить следующее в свой CSS:
body.modal-open {
overflow: hidden;
}Вы можете утверждать, что приведенный выше код принадлежит базе кода Bootstrap CSS, но это легко исправить, добавив его на свой сайт.
Обновление 8 февраля 2013 г.
Теперь это перестало работать в Twitter Bootstrap v. 2.3.0 - они больше не добавляют modal-openкласс в тело.
Обходной путь должен был бы добавить класс к телу, когда модал должен быть показан, и удалить его, когда модал закрыт:
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});Обновление 11 марта 2013 г.
Похоже, modal-openкласс вернется в Bootstrap 3.0 явно для предотвращения прокрутки:
Повторно вводит .modal-open на теле (чтобы мы могли убрать свиток там)
Смотрите это: https://github.com/twitter/bootstrap/pull/6342 - посмотрите модальный раздел.
modal-openвернется в Bootstrap 3, поэтому при запуске следует безопасно удалить приведенный выше код.
Принятый ответ не работает на мобильных устройствах (iOS 7, по крайней мере, Safari 7), и я не хочу, чтобы на моем сайте запускался MOAR JavaScript, когда CSS подойдет.
Этот CSS предотвратит прокрутку фоновой страницы под модой:
body.modal-open {
overflow: hidden;
position: fixed;
}Тем не менее, он также имеет небольшой побочный эффект по существу прокрутки к вершине. position:absoluteрешает эту проблему, но вновь вводит возможность прокрутки на мобильном телефоне.
Если вы знаете свой видовой экран ( мой плагин для добавления видового экрана к<body> ), вы можете просто добавить переключатель css для position.
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}Я также добавляю это, чтобы предотвратить переход основной страницы влево / вправо при показе / скрытии модалов.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}position: fixedтела.
Просто скрыть переполнение тела, и это делает тело не прокручивать. Когда вы скрываете модал, верните его в автоматический режим.
Вот код:
$('#adminModal').modal().on('shown', function(){
$('body').css('overflow', 'hidden');
}).on('hidden', function(){
$('body').css('overflow', 'auto');
})Вы можете попробовать установить размер тела на размер окна с переполнением: скрыто, когда модальное окно открыто.
Вам нужно выйти за рамки ответа @ charlietfl и учетной записи для полос прокрутки, в противном случае вы можете увидеть перекомпоновку документа.
bodyширинуbodyпереполнение наhiddenЯвно установите ширину тела, равную ширине шага 1.
var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);bodyпереполнение наautoУстановите bodyширинуauto
var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");Вдохновлено: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
$body.css("overflow", "auto");на последнем этапе :)
Предупреждение: Опция ниже не относится к Bootstrap v3.0.x, поскольку прокрутка в этих версиях была явно ограничена самим модалом. Если вы отключите события колеса, вы можете непреднамеренно запретить некоторым пользователям просматривать контент в модальных моделях, высота которых превышает высоту области просмотра.
Прокрутки событие не отменяемое. Однако можно отменить события колесика мыши и колеса . Большая оговорка в том, что не все устаревшие браузеры поддерживают их, Mozilla только недавно добавила поддержку последних в Gecko 17.0. Я не знаю полного распространения, но IE6 + и Chrome поддерживают их.
Вот как их использовать:
$('#myModal')
.on('shown', function () {
$('body').on('wheel.modal mousewheel.modal', function () {
return false;
});
})
.on('hidden', function () {
$('body').off('wheel.modal mousewheel.modal');
});overflow:hiddenпока лучше.
/* =============================
* Disable / Enable Page Scroll
* when Bootstrap Modals are
* shown / hidden
* ============================= */
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function theMouseWheel(e) {
preventDefault(e);
}
function disable_scroll() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', theMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = theMouseWheel;
}
function enable_scroll() {
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', theMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = null;
}
$(function () {
// disable page scrolling when modal is shown
$(".modal").on('show', function () { disable_scroll(); });
// enable page scrolling when modal is hidden
$(".modal").on('hide', function () { enable_scroll(); });
});Не удалось заставить его работать в Chrome, просто изменив CSS, потому что я не хотел, чтобы страница прокручивалась до самого верха. Это работало нормально:
$("#myModal").on("show.bs.modal", function () {
var top = $("body").scrollTop(); $("body").css('position','fixed').css('overflow','hidden').css('top',-top).css('width','100%').css('height',top+5000);
}).on("hide.bs.modal", function () {
var top = $("body").position().top; $("body").css('position','relative').css('overflow','auto').css('top',0).scrollTop(-top);
});Для Bootstrap вы можете попробовать это (работая над
Firefox,ChromeиMicrosoft Edge):
body.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
}Надеюсь это поможет...
Добавление класса 'is-modal-open' или изменение стиля тега body с помощью javascript - это нормально, и все будет работать так, как должно. Но проблема, с которой мы столкнемся, заключается в том, что тело становится переполненным: скрытое, оно будет прыгать наверх (scrollTop станет 0). Это станет проблемой юзабилити позже.
Как решение этой проблемы, вместо того, чтобы менять переполнение тега body: hidden, измените его на html tag
$('#myModal').on('shown.bs.modal', function () {
$('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
$('html').css('overflow','auto');
});Я не уверен насчет этого кода, но он того стоит.
В jQuery:
$(document).ready(function() {
$(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
$("#Modal").css("overflow", "hidden");
});
});Как я уже говорил, я не уверен на 100%, но все равно попробую.
По состоянию на ноябрь 2017 года Chrome представил новую собственность CSS
overscroll-behavior: contain;
которая решает эту проблему, хотя на момент написания этой статьи ограничена кросс-браузерная поддержка.
см. ссылки ниже для получения полной информации и поддержки браузера
Лучшее решение - это решение css-only, body{overflow:hidden}используемое большинством из этих ответов. Некоторые ответы содержат исправление, которое также предотвращает «скачок», вызванный исчезающей полосой прокрутки; однако, ни один не был слишком изящен. Итак, я написал эти две функции, и они, кажется, работают довольно хорошо.
var $body = $(window.document.body);
function bodyFreezeScroll() {
var bodyWidth = $body.innerWidth();
$body.css('overflow', 'hidden');
$body.css('marginRight', ($body.css('marginRight') ? '+=' : '') + ($body.innerWidth() - bodyWidth))
}
function bodyUnfreezeScroll() {
var bodyWidth = $body.innerWidth();
$body.css('marginRight', '-=' + (bodyWidth - $body.innerWidth()))
$body.css('overflow', 'auto');
}Проверьте этот jsFiddle, чтобы увидеть его в использовании.
open modalширине кнопок. Chrome 8
Многие предлагают «переполнение: скрытый» на теле, которое не будет работать (по крайней мере, в моем случае), так как это заставит сайт прокручиваться вверх.
Это решение, которое работает для меня (как на мобильных телефонах, так и на компьютерах), используя jQuery:
$('.yourModalDiv').bind('mouseenter touchstart', function(e) {
var current = $(window).scrollTop();
$(window).scroll(function(event) {
$(window).scrollTop(current);
});
});
$('.yourModalDiv').bind('mouseleave touchend', function(e) {
$(window).off('scroll');
});Это заставит работать модальную прокрутку и предотвратит одновременную прокрутку сайта.
Вы можете использовать следующую логику, я протестировал ее, и она работает (даже в IE)
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var currentScroll=0;
function lockscroll(){
$(window).scrollTop(currentScroll);
}
$(function(){
$('#locker').click(function(){
currentScroll=$(window).scrollTop();
$(window).bind('scroll',lockscroll);
})
$('#unlocker').click(function(){
currentScroll=$(window).scrollTop();
$(window).unbind('scroll');
})
})
</script>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button id="locker">lock</button>
<button id="unlocker">unlock</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>Я не уверен на 100%, что это будет работать с Bootstrap, но стоит попробовать - он работал с Remodal.js, который можно найти на github: http://vodkabears.github.io/remodal/, и это будет иметь смысл для методов быть очень похожим.
Чтобы остановить переход страницы наверх, а также предотвратить смещение содержимого по правому краю, добавьте класс, bodyкогда запускается модал, и установите следующие правила CSS:
body.with-modal {
position: static;
height: auto;
overflow-y: hidden;
}Это position:staticи то, height:autoчто объединяет, чтобы остановить скачок контента вправо. overflow-y:hidden;Останавливает страницу от того , прокручивать за модальным.
На основании этой скрипки: http://jsfiddle.net/dh834zgw/1/
следующий фрагмент (с использованием jquery) отключит прокрутку окна:
var curScrollTop = $(window).scrollTop();
$('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');И в вашем css:
html.noscroll{
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
z-index: 10;
}Теперь, когда вы удаляете модал, не забудьте удалить класс noscroll в теге html:
$('html').toggleClass('noscroll');overflowбыть установлено hidden? +1 хотя как это у меня сработало (использую hidden).
У меня была боковая панель, которая была сгенерирована путем взлома флажков. Но основная идея - сохранить документ scrollTop и не изменять его при прокрутке окна.
Мне просто не понравилось, что страница прыгает, когда тело становится «переполненным: скрытым».
window.addEventListener('load', function() {
let prevScrollTop = 0;
let isSidebarVisible = false;
document.getElementById('f-overlay-chkbx').addEventListener('change', (event) => {
prevScrollTop = window.pageYOffset || document.documentElement.scrollTop;
isSidebarVisible = event.target.checked;
window.addEventListener('scroll', (event) => {
if (isSidebarVisible) {
window.scrollTo(0, prevScrollTop);
}
});
})
});К сожалению, ни один из ответов выше не устранил мои проблемы.
В моей ситуации веб-страница изначально имеет полосу прокрутки. Всякий раз, когда я нажимаю на модал, полоса прокрутки не исчезает, а заголовок немного смещается вправо.
Затем я попытался добавить .modal-open{overflow:auto;}(что большинство людей рекомендовало). Это действительно исправило проблемы: полоса прокрутки появляется после того, как я открываю модальное окно. Тем не менее, появляется еще один побочный эффект, который заключается в том, что «фон под заголовком немного сместится влево вместе с еще одним длинным баром позади модального»
К счастью, после того, как я добавил {padding-right: 0 !important;}, все исправлено отлично. И заголовок, и фон тела не двигались, а модал все еще сохраняет полосу прокрутки.
Надеюсь, что это может помочь тем, кто все еще застрял в этой проблеме. Удачи!
Большинство частей здесь, но я не вижу ответа, который бы все это соединил.
Проблема тройная.
(1) предотвратить прокрутку базовой страницы
$('body').css('overflow', 'hidden')(2) и удалите полосу прокрутки
var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)(3) очистить, когда модал уволен
$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')Если модальный режим не полноэкранный, примените привязки .modal к полноэкранному наложению.
Я просто сделал это так ...
$('body').css('overflow', 'hidden');Но когда исчез скроллер, он переместил все правильно на 20 пикселей, поэтому я добавил
$('body').css('margin-right', '20px');сразу после этого.
Работает для меня.
Если модальное значение - 100% высота / ширина, «мышиный указатель / уход» будет работать, чтобы легко включить / отключить прокрутку. Это действительно сработало для меня:
var currentScroll=0;
function lockscroll(){
$(window).scrollTop(currentScroll);
}
$("#myModal").mouseenter(function(){
currentScroll=$(window).scrollTop();
$(window).bind('scroll',lockscroll);
}).mouseleave(function(){
currentScroll=$(window).scrollTop();
$(window).unbind('scroll',lockscroll);
});Почему бы не сделать это, как Булма? Когда модальный активен, тогда добавьте в html их класс .is-clipped, который переполнен: hidden! Важный; И это все.
Редактировать: Окей, Булма имеет эту ошибку, поэтому вы должны добавить также другие вещи, как
html.is-modal-active {
overflow: hidden !important;
position: fixed;
width: 100%;
}Поскольку для меня эта проблема представлена в основном на iOS, я предоставляю код, который можно исправить только на iOS:
if(!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) {
var $modalRep = $('#modal-id'),
startScrollY = null,
moveDiv;
$modalRep.on('touchmove', function(ev) {
ev.preventDefault();
moveDiv = startScrollY - ev.touches[0].clientY;
startScrollY = ev.touches[0].clientY;
var el = $(ev.target).parents('#div-that-scrolls');
// #div-that-scrolls is a child of #modal-id
el.scrollTop(el.scrollTop() + moveDiv);
});
$modalRep.on('touchstart', function(ev) {
startScrollY = ev.touches[0].clientY;
});
}Ни один из приведенных выше ответов не работал идеально для меня. Поэтому я нашел другой способ, который хорошо работает.
Просто добавьте scroll.(namespace)слушателя и установите scrollTopсамый documentпоследний из его значений ...
а также удалите слушателя в вашем близком сценарии.
// in case of bootstrap modal example:
$('#myModal').on('shown.bs.modal', function () {
var documentScrollTop = $(document).scrollTop();
$(document).on('scroll.noScroll', function() {
$(document).scrollTop(documentScrollTop);
return false;
});
}).on('hidden.bs.modal', function() {
$(document).off('scroll.noScroll');
});Кажется, это плохо работает на Chrome. Любое предложение, чтобы исправить это?
Это сработало для меня:
$("#mymodal").mouseenter(function(){
$("body").css("overflow", "hidden");
}).mouseleave(function(){
$("body").css("overflow", "visible");
});