#ИМЯ?

Ответ 1

У меня была аналогичная проблема с (довольно сложным) вложенным прокручиваемым div, который отлично прокручивался в iOS 5, 6 и 7, но это прерывисто не удалось прокрутить в iOS 8.1.

Решение, которое я нашел, это удалить все CSS, которые обманывают браузер в использовании графического процессора:

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

Таким образом, '-webkit-overflow-scrolling: touch;' все еще могут быть включены и по-прежнему функционируют как обычно.

Это означало жертвовать (для меня, сомнительных) успехов в прокручивании производительности, что вышеупомянутые хаки давали в ранних воплощениях iOS, но при выборе между этим и инерционным прокруткой прокрутка инерции считалась более важной (и мы надеемся 't поддержка iOS 5 больше).

На этом этапе я не могу сказать, почему этот конфликт существует; возможно, это плохая реализация этих функций, но я подозреваю, что что-то немного глубже в CSS, который вызывает это. В настоящее время я пытаюсь создать упрощенную конфигурацию HTML/CSS/JS, чтобы продемонстрировать ее, но, возможно, для нее требуется структура тяжелой разметки и большие объемы динамических данных.

Добавление: Я, однако, должен указать нашему клиенту, что если даже с этим исправлением пользователь начнет прокручивать прокручиваемый элемент, ей придется ждать секунду после останавливаясь перед тем, как прокручивать прокручиваемый элемент. Это собственное поведение.

Ответ 2

У меня была эта проблема и я нашел решение. Решение состоит в том, что вы должны поместить свой контент в два контейнера для ex:(. DashboardScroll > .dashboardScroll-inner) и предоставить внутренний контейнер ".dashboardScroll-inner" на 1px больше высоты, чем родительский .dashboardScroll ", пропустите этот css3 свойство

.dashboardScroll-inner { height: calc(100% + 1px);}

ознакомьтесь с этим:

http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/

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

.dashboardScroll:after { height: calc(100% + 1px);}

Ответ 3

У меня была такая же проблема в веб-приложении Кордовы. Для меня проблема заключалась в том, что у меня был родительский <div>, который был анимирован и имел свойство animation-fill-mode: forwards;

Удаление этого свойства разрешило проблему и устранило разбитую переполненную прокрутку.

Ответ 4

Я не смог решить проблему с предыдущими ответами. Итак, через несколько часов я попросил библиотеку iScroll, iScroll. Я знаю, в том числе дополнительную библиотеку (и довольно значительную), чтобы добавить прокрутку только для iOS, это не здорово, но это то, что сработало для меня. Просто следуйте readme, достаточно облегченной версии.

Недостатки:

• Прокрутка на Android теперь выглядит как дерьмо, она больше не является родной.
• Невозможно обновить страницу, прокручивая больше
• Вам нужно применить другое исправление для Android: Клики не работают

Я не уверен, буду ли я использовать его, но если вы в этом нуждаетесь, отпустите его.

Ответ 5

Я пробовал все решения здесь без успеха. Я смог заставить его работать, имея свойство -webkit-overflow-scrolling: touch; в прокручиваемом div AND в родительском контейнере.

div.container {
    -webkit-overflow-scrolling: touch;
}

div.container > div.scrollable {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

Ответ 6

У меня были проблемы с этим, но в немного другом сценарии.

У меня есть свои divs с инерцией без проблем.

У меня есть простой JSFiddle, где вы можете посмотреть.

https://jsfiddle.net/SergioM/57f2da87/17/

.scrollable {
    width:100%;
    height:200px;
    -webkit-overflow-scrolling:touch;
    overflow:scroll;
}

Надеюсь, что это поможет.

Ответ 7

У меня была эта проблема при использовании модального wstwwwwww. Я исправил его, создав свою собственную таблицу стилей и удалив фиксированную ширину и маржу в запросах на медиа.

ОРИГИНАЛ:

  .modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
  }

@media (min-width: 768px) {
  .modal-dialog {
      width: 600px;
      margin: 30px auto;
  }
    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
    .modal-sm {
        width: 300px;
    }
}
@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
    }
}

Изменения:

.modal-dialog {
    margin: 0px;
    margin-top: 30px;
    margin-left: 5%;
    margin-right: 5%;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: auto;
        margin-left: 10%;
        margin-right: 10%;
    }
    .modal-content {
       -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
}

@media (min-width: 992px) {
    .modal-dialog {
        width: auto;
        margin-left: 15%;
        margin-right: 15%;
    }  
}

Ответ 8

Я использовал последний метод в mohammed Suleiman answer (.dashboardScroll: после {height: calc (100% + 1px);}), но в результате у меня было пустое пространство 100% + 1px ниже моего содержимого. Я исправил это, изменив высоту до 1px после 500 мс. Ужасно, но он работает.

Это было приложение response.js, поэтому мой код был таким:

componentDidUpdate() {
    if (window.navigator.standalone && /* test for iOS */) {
        var self = this;
        setTimeout(function(){
            self.refs.style.innerHTML = "#content::after { height: 1px}";
        }, 500);
    }
}

и сделать:

render() {
    var style = '';
    if (window.navigator.standalone && /* test for iOS */) {
        style = "#content::after { height: calc(100% + 1px)}";
    }
    return (<div>
                <style type="text/css" ref="style">
                    {style}
                </style>
                <div id="content"></div>
            </div>);
}