Overflow-y не работает в сафари внутри модального

Хорошо, вот html:

<div style="height: 200px; position: relative;"  id="filterOptionsContainer">
                <table id="filterOptionsTable" class="table table-striped table-hover">
                </table>
            </div>

В принципе, я динамически добавляю строки в таблицу, и я хотел бы, чтобы контейнер прокручивал переполнение. Сначала я попытался сделать очевидное:

#filterOptionsContainer {
overflow-y: auto;
}

и это прекрасно работает везде, кроме Safari на мобильных устройствах ios.

С тех пор я потратил часы, пытаясь использовать каждую комбинацию стилей, о которых я могу думать и читать, но я не могу получить стандартную прокрутку переполнения. Самое близкое, что я получил, - это показать полосу прокрутки (хотя это не было прокруткой).

Вся помощь приветствуется. Мне трудно поверить, что невозможно прокрутить содержимое div в модальном режиме в Safari...

Изменить: по-прежнему в этой проблеме. Мне нужно решить эту проблему.

Ответы

Ответ 1

Я решил это, переключившись на мультиселекцию (и скрывая прокручиваемый div) на мобильных устройствах (так что никакого реального решения). Спасибо всем за помощь.

Изменить: Я, наконец, понял это. В основном, что случилось, так это то, что после того, как я переключился на использование мультиселектора, он тоже странно работал на устройствах IOS при использовании Safari.

В ходе дальнейшего изучения мой коллега заметил dojo события касания как для прокручиваемого div, так и для мультиселекта (используемый мной шаблон использует dojo). Я начал искать в источнике шаблона, чтобы выяснить, почему эти события были привязаны ко всем этим элементам, и я заметил модуль dojo, называемый "dojo/touch". После удаления этого модуля из проекта элементы работают нормально в Safari.

Отказ в том, что "dojo/touch" и IOS Safari полностью несовместимы.

Ответ 2

Попробуйте применить эту встроенную строку или через JQuery Script

 style="overflow-y: scroll; -webkit-overflow-scrolling: touch;"

или через JQuery Script

$("#filterOptionsContainer").css({
    "overflow-y": "scroll",
    "-webkit-overflow-scrolling": "touch"
});

Ответ 3

У меня нет продукта IOS, чтобы проверить это, но похоже, что overflow: auto является известной ошибкой Safari.

Попробуйте следующее:

#filterOptionsContainer {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Ответ 4

You can try this it working fine with safari 

#filterOptionsContainer {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Ответ 5

Вы можете установить overflow-y:hidden; после автоматического переполнения, а на сафари по крайней мере это правило будет применено. Ссылка

Ответ 6

Код для использования двух вложенных div для отображения только вертикальной полосы прокрутки.

<!DOCTYPE html>
<html>
<body>
<div class="div1">     
    <div class="div2">     
111111<br>
222222222222222222222<br>
3333333333333333333333333333333333<br>
44444444<br>
55555555555555555555555555555<br>
6666666666666666666666666666<br>
77777777777<br>
88888888888888888888888888<br>
99999999999999999999999<br>
0000000000000000000000000000000<br>
aaaaaaaaaaaaaaaaaa<br>
bbbb<br>
cccccccccccccccc<br>
    </div>
</div>
</body>
</html>
<style>

.div1{
    overflow:auto;
    width:100px;
    height:100px;
}
.div2{
    overflow:hidden;
    width:100%;
}
</style>

Ответ 7

вы можете попробовать это, он отлично работает для меня

#filterOptionsContainer {
    overflow: auto; 
    overflow-y: auto; 
    overflow-x: hidden; 
}

Ответ 8

Проверьте свою версию браузера Safari. И выполните следующие критерии:

  • Доступно в Safari 3.0 и более поздних версиях.
  • Доступно в iOS 1.0 и более поздних версиях.

если вы против условий, то получите следующие меры:

  • Применить ClearFix

    .clearfix:after {visibility: hidden;}

Причина: настройка переполнения не очищает поплавок элемента

ИЛИ

  1. Установите положение элемента относительно уровня корня/тела следующим образом:

    body { position:relative; overflow-x:hidden; }

Примечание: применить только один из них.

Спасибо и приветствуем

Ответ 9

Если ни одно из решений не работает, вы можете попробовать flex: 1 1; Это кросс-браузерная поддержка.