Question

我的div高度固定，需要添加向上滚动事件，我当前的代码适用于chrome，但不适用于Firefox和移动设备。

警报显示何时

达到div的TOP（来自PC chrome）
到达div的底部（来自mobile和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>

Answer 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中的每个设置，然后确定您的案子需要什么，不需要什么。可能是那些设置颠倒了顺序，这才有所作为。您可能知道为什么要为此特定应用程序执行此操作。

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

1 个答案: