Как отключить прокрутку тела, когда модал открыт только IOS - PullRequest
Новая
       29

Как отключить прокрутку тела, когда модал открыт только IOS

0 голосов
/ 20 февраля 2019

Только для IOS / iPhone X / iPhone 7 и т. Д.

Даже модальные библиотеки jquery не работают!https://jquerymodal.com/ - Откройте модал на вашем iPhone, и вы сможете прокрутить тело.

Мне очень трудно найти решение, которое останавливает прокрутку тела, не заставляя страницу переходить наверх при каждом открытии модального окна (что так же плохо, как прокрутка страницы)

Кажется, это огромная проблема, с которой сталкиваются многие люди.Как вы можете видеть здесь:

Я охотился на интернет без удачи, есть ли у кого-нибудь решение?!

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Я создал следующее решение, которое работает на iOS 12!

Хотя во встроенной демонстрации ниже используется Bootstrap 4, это же решение одинаково хорошо работает с Bootstrap 3, поскольку ни один из модальных классов или имен событий не используется.различаются.

Шаг 1: Используйте фиксированное позиционирование, чтобы заморозить body на месте при открытом модале

Когда модальный Bootstrap открыт, класс называется.modal-open добавляется к body.Добавьте следующие дополнительные стили к этому классу: 

body {
    &.modal-open {
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
    }
}

Теперь при каждом открытии модального окна body будет фиксироваться на месте и иметь размеры, совпадающие с размерами самого окна просмотра.Это полностью предотвращает прокрутку, потому что прокручивать некуда и нечего!

Но: это также означает, что открытие модального режима заставит страницу перепрыгнуть наверх, потому что body больше не выходит за нижний крайобласти просмотра (при условии, что содержимое страницы выше).

Шаг 2. Имитация предыдущего расстояния прокрутки при открытом модале

Bootstrap раскрывает события, которые запускаются, когдамодал открывается или закрывается.Мы можем использовать их, чтобы решить проблему «прыжка на вершину», потянув верхнюю часть body вверх , когда модальное окно открыто, так что похоже, что позиция прокрутки не изменилась: 

$(function() {
    var $window = $(window),
        $body = $("body"),
        $modal = $(".modal"),
        scrollDistance = 0;

    $modal.on("show.bs.modal", function() {
        // Get the scroll distance at the time the modal was opened
        scrollDistance = $window.scrollTop();

        // Pull the top of the body up by that amount
        $body.css("top", scrollDistance * -1);
    });
});

Однако при закрытии модального окна страница все равно будет переходить наверх, поскольку значение scrollTop для window по-прежнему 0.

Шаг3: Сбросить все, когда модал закрыт

Теперь нам просто нужно подключиться к событию, которое срабатывает, когда модал закрыт, и вернуть все обратно, как было:

  • Удалите фиксированное положение и отрицательное верхнее значение на body
  • Установите положение прокрутки окна обратно на то, что было изначально 
$modal.on("hidden.bs.modal", function() {
    // Remove the negative top value on the body
    $body.css("top", "");

    // Set the window's scroll position back to what it was before the modal was opened
    $window.scrollTop(scrollDistance);  
});

Нет необходимости вручную удалятьисправлено позиционирование на body, поскольку оно устанавливается через класс .modal-open, который Bootstrap удаляет при закрытии модального окна.

Демо

Сложите все это вместе, и теперь вы можете предотвратить прокрутку фона на iOS, пока модал открыт, не теряя свою позицию прокрутки!

Откройте следующеессылка на устройстве iOS: https://daguy.github.io/ios-modal-fix/

0 голосов
/ 20 февраля 2019

Умм, я вижу, что на SO уже есть несколько тем.Попробуйте это возможно? 

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-overflow-scrolling: touch) {
  /* CSS for other than iOS devices */ 
}

CSS медиазапрос предназначен только для устройств iOS

...