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.