JS - scrollTop не работает в мобильных устройствах и Firefox

#javascript #jquery #dom

Вопрос:

У меня фиксированная высота div, и мне нужно добавить событие прокрутки вверх, мой текущий код работает в Chrome, но не работает в Firefox и мобильных устройствах.

предупреждение показывает, когда

достижение ВЕРШИНЫ div (с ПК chrome)
достижение нижней части div (из мобильных устройств и Firefox)

Примечание: мне нужно решение в ванильном js, а не в jquery.

код:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            margin: 5% auto;
            width: 40%;
            padding: 10px;
            margin-bottom: 40px;
        }

        .chat {
            border: 1px ridge #34495e;
            font-family: 'Lato', sans-serif;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: reverse;
                -ms-flex-direction: column-reverse;
                    flex-direction: column-reverse;
            max-height: 500px;
            overflow-y: auto;
            margin: 5px 0;
        }

    </style>
</head>
<body>
    <div id="container">
        <div class="chat" id="my_id">
            <p>TEST1</p>            
            <p>TEST2</p>
            <p>TEST1</p>            
            <p>TEST2</p>
            <p>TEST1</p>            
            <p>TEST2</p>
            <p>TEST1</p>            
            <p>TEST2</p>
            <p>TEST1</p>            
            <p>TEST2</p>
            <p>TEST1</p>            
            <p>TEST2</p>
            <p>TEST1</p>            
            <p>TEST2</p>                        
        </div>
    </div>
    <script>
      var el = document.querySelector("#my_id")

      el.addEventListener("scroll",function (){
        if (el.scrollTop == 0) {
           alert("Load old messages")
        }
      })
    </script>

</body>
</html>

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

2. codepen.io/nikushamikusha/pen/NWrOGMa

3. Chrome, Edge и Firefox (в Windows 10) дали мне один и тот же результат — я видел предупреждение при прокрутке вниз в каждом случае.

4. Также видел предупреждение, когда я прокручивал вниз на iPadIOS 14 Safari

Ответ №1:

Если вы поместите a console.log(el.scrollTop) в качестве первой строки в функции прослушивания событий, вы увидите, что при прокрутке до нижней части элемента количество прокручиваемых элементов равно 0, а при прокрутке вверх количество прокручиваемых элементов становится все более и более отрицательным.

Обратите внимание, что .chat имеет несколько настроек, связанных с flex / column:

  display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;

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

Мое предложение состояло бы в том, чтобы просмотреть каждую из этих настроек в .chat и решить, что необходимо для вашего случая, а что нет. Скорее всего, именно те настройки, которые меняют порядок, имеют значение. Возможно, вы знаете, почему это было сделано для этого конкретного приложения.

1. Я думаю, вы правы. Я хотел автоматически прокручивать вниз контейнер чата, и я использовал трюк CSS, но я должен сделать автоматическую прокрутку вниз с помощью javascript