Проблема с прокруткой с простым HTML и переполнением: автоматически в родном браузере Android

#android #html #css #scroll

#Android #HTML #css #прокрутка

Вопрос:

Простая HTML-страница содержит div с overflow-y: auto внутри другого div с overflow-y: auto. Эта страница обычно прокручивается на сенсорных устройствах с браузерами IOS Safari и Android Chrome.

Однако, если я открою ту же страницу в родном браузере Android v.4.0 до 4.3 и прокручиваю внешний div, внутренний div не перемещается синхронно с оставшимся содержимым и переходит на свое место только после некоторой задержки.

То же самое происходит, если внутренний div имеет overflow-x: auto .

Пример страницы: http://jsbin.com/cojoluwo/1 /

Код выглядит следующим образом:

 <!DOCTYPE html>
<html><head>
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
    <title>test</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #content {
            height: 100%;
            overflow-y: auto;
        }
        #scroller{
            height: 100px;
            overflow-y: auto;
            width: 200px;
            border: 1px solid red;
        }
    </style>

</head>
<body class='sapUiBody'>
    <div id='content'>
        <div>
            <p> some text 
                    ......
            <p> some text 
            <div id=scroller>
                <p>internal text
                            ...........
                <p>internal text
            </div>
            <p> some text 
                    ...........
            <p> some text 
        </div> 
    </div>
</body>
</html>

Это ошибка? Если да, известно ли какое-либо обходное решение?

1. У меня такая же проблема: первый div отслеживается синхронно с пальцем, где остальные следы …….. выглядит очень плохо. Сейчас я проверяю, необходим ли элемент «document» между «viewport» и «дочерними подразделениями»

2. хорошо, похоже, это работает в обычном мобильном интернете (Chrome), и в нашем SDK только что была встроена более старая версия для веб-просмотров

Ответ №1:

в этом нет необходимости:

 #content {
  height: 100%;
  overflow-y: auto;
}

прокручиваемый div с набором overflow внутри другого прокручиваемого div с набором overflow не является хорошей идеей для мобильных устройств, и поскольку ваши свойства css для #content являются избыточными и бесполезными, вы можете безопасно удалить их, и это сработает

http://jsbin.com/cojoluwo/5

1. Приведенный выше пример кода просто демонстрирует проблему. В моем конкретном случае мне нужна горизонтально прокручиваемая область, например, горизонтальный скроллер миниатюр, внутри вертикально прокручиваемой области. Почему это не очень хорошая идея для мобильных устройств? Разве это не соответствует спецификации CSS? Мобильный браузер Chrome и мобильный браузер Safari обрабатывают его правильно.

2. это ваш реальный код? просто заметил, что у вас есть тысяча <p> тегов, которые никогда не закрываются, и это, безусловно, может что-то сломать

3. Нет, это просто быстрый и грязный пример. Однако код показывает проблему. Мой реальный код состоит из нескольких тысяч строк.

4. <p> тег не нужно закрывать в HTML5. он ничего не нарушает. смотрите здесь: w3.org/TR/html-markup/p.html

5. извините, я тем временем тестировал несколько вещей, но, похоже, ничего не работает