JavaScript 事件未在滚动时触发
[英]JavaScript event not triggering on scroll
问题描述
我希望这不是一个重复的主题，因为我已经检查了关于 SO 的多个问题，但它们对我不起作用。
我正在尝试基于滚动 position 使按钮可见/不可见，因此我创建了一个滚动事件侦听器来触发一个 function 来检查滚动 position 并基于此执行必要的操作。 但是，我无法让听众开火。
我已经检查了多个文档，并试图确保我所做的一切都相应地无济于事。 我在这里想念什么？
const showHideArrow = () => { //console.log("func triggered"); const arrow = document.getElementById("scroll-arrow"); if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { arrow.style.display = "none"; } else { arrow.style.display = "block"; } } window.addEventListener("scroll", showHideArrow);
section{ max-height: 100vh; height: 100vh; width: 90vw; margin: 0 auto; display: flex; flex-direction: column; }.scroll-arrow { margin: auto auto 5rem auto; text-align: center; padding-bottom: 5px; }
<head> <title>Test</title> </head> <body> <main> <section class="intro"> <a id="scroll-arrow" class="scroll-arrow" target="_self" href="#about"> <svg width="34" height="34" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11.0001 3.67157L13.0001 3.67157L13.0001 16.4999L16.2426 13.2574L17.6568 14.6716L12 20.3284L6.34314 14.6716L7.75735 13.2574L11.0001 16.5001L11.0001 3.67157Z" fill="currentColor" /> </svg> </a> </section> <section id="about" class="about"> <h2>test</h2> </section> </main> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2020-05-12 12:48:28
似乎问题出在这一行：
html, body {
overflow-x: hidden;
}
我不知道为什么以及如何阻止事件侦听器触发，但它现在似乎正在工作。 我将不得不找到其他东西来隐藏滚动条
JavaScript/jQuery 不触发滚动事件
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.