В настоящее время я использую twitter bootstrap 3 modal на мобильном телефоне. Он отлично работает на рабочем столе, однако на мобильном телефоне всякий раз, когда я прокручиваю его, также прокручивается окно за модальным. Как я могу предотвратить это?twitter bootstrap 3 modal on mobile scroll issues
ДЛЯ Bootstrap 3
Я нашел решение этой проблемы, которая, кажется, достаточно хорошо для моего сайта.
CSS:
body.modal-open > .wrap {
overflow: hidden;
height: 100%;
}
.modal-content,
.modal-dialog,
.modal-body {
height: inherit;
min-height: 100%;
}
.modal {
min-height: 100%;
}
HTML:
<body>
<div class="wrap">All non-modal content</div>
<div class="modal"></div>
</body>
Таким образом, в случае, когда модальный открыт, все покадрово содержание ограничено до высоты окна просмотра и переполнения скрыта, который предотвращает прокрутку основного сайта, в то время как модальная модель все еще может быть прокручена.
EDIT: Это исправление имеет некоторые проблемы в Firefox.
Fix для моего сайта было (FF только медиа-запрос):
@-moz-document url-prefix() {
.modal-body { height: auto; min-height: 100%; }
.modal { height: auto; min-height: 100%; }
.modal-dialog {
width: 100%;
height: 100%;
min-height: 100%;
padding: 0;
margin: 0;
top: 0;
left: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
border: 0px solid #000;
margin: 0;
padding: 0;
top: 0;
left: 0;
}
}
Я заметил, что он только прокручивает фоновую страницу, когда в модальной вашей прокрутке, и вы попадаете в нижнюю часть модального, тогда, если вы попытаетесь сохранить прокрутку вниз, она прокручивает фоновый рисунок. Посмотрите на панель переполнения справа, она просто видна, когда модальная функция открыта (на Chrome-Android)
Похоже, эффект заключается в том, чтобы прокрутить модальное значение до степени модальности, а затем автоматически прокручивать фоновый рисунок, modal все еще открыт.
Интересно, что они рассматривают это в документации, не предлагая много на пути решения:
«Поддержка для перелива : скрытый элемент <body> довольно ограничен в iOS и Android. С этой целью, когда вы прокручиваете верхнюю или нижнюю часть модального файла в любом из браузеров этих устройств, содержимое <body> начнет прокручиваться ».
http://getbootstrap.com/getting-started/#overflow-and-scrolling
Эй, ребята, так что я думаю, что я нашел фикс для Bootstrap 3. Это работает для меня на Iphone и Android на данный момент. Его разброс часов в часы поиска, чтения и тестирования. Поэтому, если вы видите части своего кода, здесь кредитуется вам lol.
@media only screen and (max-device-width:768px){
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 {
overflow-x: hidden;
overflow-y: scroll !important;
}
Причина конкретных СМИ на есть на рабочем столе я был возникли проблемы с, когда модальный откроет все содержимое на странице будет смещаться с центром слева. Похоже, дерьмо. Таким образом, это нацелено на устройства с размерами планшета, где вам нужно будет прокручивать. На мобильном телефоне и планшете все еще есть небольшая смена, но на самом деле это немного. Дайте мне знать, если это сработает для вас, ребята. Надеюсь, это ставит гвоздь в гроб
Он работает, но прокручивает вверх по мобильному телефону, что раздражает. – tomericco
Да, это было очень раздражает, когда я столкнулся с этой проблемой на моем iphone 6s сегодня.
Это все еще кажется проблемой, даже с новейшим бутстрапом (3.3.6 в мой момент).
CSS Quickfix Решение: «в верхней части страницы, а модальный открыт„
body.modal-open { position: fixed; }
“Обратите внимание, что это имеет побочный эффект» прокрутки
Смотреть больше информации об этом решении here
Javascript/JQuery Решение:
Лучшим решением было бы использовать bootstrap's modal events. Это решение объединяет метод quickfix, но устраняет проблему «сверху страницы». Затем вы можете изменить css по мере необходимости в зависимости от события.
В моем коде ниже я устанавливаю текущую позицию окна в событии show.bs.modal (это значение используется для исправления проблемы «quickfix»).
Затем я применяю быстрое исправление css на событии shown.bs.modal. Другими словами, после того, как модальные всплывают.
И наконец, когда модальный объект закрыт, я переключаю положение тела на относительное (может быть, как я полагаю, на статичное) и прокручиваю окно до его исходного положения.
// set current position
var cPosition = false;
$('.modal').on('show.bs.modal', function(){
cPosition = $(window).scrollTop();
})
.on('shown.bs.modal', function(){
$('body').css({
position:'fixed'
});
})
.on('hide.bs.modal', function(){
$('body').css({
position:'relative'
});
window.scrollTo(0, cPosition);
});
Должно быть относительно простым в настройке для любого, у кого есть опыт работы с javascript.
Надеемся, они решают эту проблему в бутстрапе 4, но до тех пор надеются, что этот ответ поможет другим людям с аналогичными проблемами.
Для Bootstrap 3
Я нашел решение для мобильных устройств (сенсорный экран) с iscroll.js
в содержании модальной дополнения:
<div id="smartScroll"> Content of the modal </div>
Для того, чтобы инициализировать на .js
var myScroll = new IScroll('#smartScroll', {
mouseWheel: true,
scrollbars: true,
click: true
});
Вы смогли определить «иногда»? Можете ли вы опубликовать свой код или воссоздать с помощью [Bootply] (http://bootply.com) – ZimSystem
@Skelly это не иногда, это все время – adit