Я хочу, щоб моє тіло перестало прокручуватися під час використання мишоподібного колеса, поки Модальний (з http://twitter.github.com/bootstrap ) на моєму веб-сайті відкритий.
Я намагався зателефонувати фрагменту javascript нижче, коли модал відкритий, але без успіху
$(window).scroll(function() { return false; });І
$(window).live('scroll', function() { return false; });Зауважте, наш веб-сайт відмовився від підтримки IE6, хоча IE7 + має бути сумісним.
Відповіді:
Bootstrap's 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 w / 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). Це стане проблемою зручності використання згодом.
Як рішення цієї проблеми, замість того, щоб змінити переповнення тегів тіла: приховано змінити його на html-тег
$('#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, що 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 on 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, який переповнюється: приховано! Важливо; І це все.
Редагувати: Окей, у Bulma є ця помилка, тому вам потрібно додати також інші речі, наприклад
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');
});Здається, це не дуже добре працює з хромом. будь-яка пропозиція виправити це?
Це працювало для мене:
$("#mymodal").mouseenter(function(){
$("body").css("overflow", "hidden");
}).mouseleave(function(){
$("body").css("overflow", "visible");
});