JS - scrollTop 在移动设备和 Firefox 中不起作用答案

【问题标题】：JS - scrollTop doesn't work in mobile and firefoxJS - scrollTop 在移动设备和 Firefox 中不起作用
【发布时间】：2021-02-20 18:37:42
【问题描述】：

我有固定高度的 div，需要添加向上滚动事件，我当前的代码在 chrome 中工作，但在 firefox 和移动设备上不工作。

警报显示何时

达到 div 的顶部（来自 PC chrome）
到达 div 底部（来自移动设备和 Firefox）

注意：我需要 vanilla 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>

【问题讨论】：

请您添加一个工作的、最小的示例 sn-p 以便我们可以在不同的浏览器上试用它吗？特别是我认为我们需要查看您正在滚动的元素以及与它相关的任何其他 CSS，例如溢出。
codepen.io/nikushamikusha/pen/NWrOGMa
Chrome、Edge 和 Firefox（在 Windows 10 上）都给了我相同的结果 - 我在每种情况下滚动到底部时都看到了警报。
当我在 iPadIOS 14 Safari 上滚动到底部时也看到了警报

标签： javascript jquery dom

【解决方案1】：

如果您将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 中的每一项设置，然后确定您的案例需要什么，不需要什么。很可能是那些颠倒顺序的设置造成了差异。您可能知道为什么要为这个特定的应用程序这样做。

【讨论】：

我认为你是对的。我想在聊天容器上自动向下滚动，我使用了 CSS 技巧，但我应该使用 javascript 自动向下滚动