时间戳

首页 > 解决方案 > JS - scrollTop 在移动设备和 Firefox 中不起作用

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

问题描述

我有固定高度 div 并且需要添加向上滚动事件，我当前的代码在 chrome 中工作，但在 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>

标签： javascriptjquerydom

解决方案

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

推荐阅读