JS - scrollTop 在移动设备和 Firefox 中不起作用
Posted
技术标签:
【中文标题】JS - scrollTop 在移动设备和 Firefox 中不起作用【英文标题】：JS - scrollTop doesn't work in mobile and 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 上滚动到底部时也看到了警报 【参考方案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 自动向下滚动以上是关于JS - scrollTop 在移动设备和 Firefox 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
使用原生js的scrollTop，刷新进入页面定位到某一个dom元素