滾動時增加/減少變量

Question

有沒有辦法在用戶向上滾動時增加變量，在用戶向下滾動JavaScript時減少？ 變量沒有最大值或最小值，能夠調整靈敏度會很好。 我不知道從哪里開始，謝謝你的幫助！

編輯：沒有滾動條，因為頁面的內容適合屏幕，沒有額外的。 對不起，如果這引起任何混淆。

Answer 1

原始答案

您可以使用window.scrollY 。 這是在從屏幕頂部的像素的距離，所以，如果你做-window.scrollY得到它的增加 ，因為他們向上滾動，並減少 （變得更負），因為它們向下滾動，就像你問。

如果要調整靈敏度，可以將其除以任意值（在本例中為5 ）：

function getAdjustedScroll() {
    const DIVIDE_AMOUNT = 5;
    return -window.scrollY / DIVIDE_AMOUNT;
}

編輯

您還可以使用wheel事件檢測非滾動頁面上的滾輪移動。

使用與原始類似的示例：

let scrollAmount = 0;

document.addEventListener('wheel', (event) => {
    const DIVIDE_AMOUNT = 5;
    scrollAmount += event.deltaY / DIVIDE_AMOUNT;
});

Answer 2

我想你正在尋找車輪事件 。 旋轉鼠標滾輪或類似設備時會觸發此事件，例如滾動時。 以下是如何使用它的示例：

 var testDiv = document.getElementById("test-div"); var amount = 0; document.addEventListener("wheel", function(ev) { amount += ev.deltaY; testDiv.textContent = amount; }); 

 <div id="test-div">SCORLL!</div> 

筆記：

• 即使沒有實際滾動，也會觸發此事件。 如果沒有滾動空間，則事件仍會觸發。
• 如果你想增加靈敏度，那么只需將ev.deltaY乘以代表靈敏度的數字： amount += 0.5 * ev.delta; 例如。

 var testDiv = document.getElementById("test-div"); var amount = 0; document.addEventListener("wheel", function(ev) { amount += ev.deltaY; testDiv.textContent = 1000 * amount; }); 

 <div id="test-div">SCORLL!</div> 

• 您可以使用ev.preventDefault()來阻止實際滾動。 amount變量仍將改變，但不會發生頁面滾動。

 var testDiv = document.getElementById("test-div"); var amount = 0; document.addEventListener("wheel", function(ev) { amount += ev.deltaY; testDiv.textContent = amount; ev.preventDefault(); }); 

 <div id="test-div">SCORLL!</div> 

Answer 3

就在這里。 通過使用getBoundingClientRect（）; 方法有4個選項： - 頂部，左側，底部和右側。進一步閱讀： https ： //developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Answer 4

 $("document").ready(function(){ $(window).scroll(function(){ let scrollValue = window.scrollY; let num = $("#num"); num.html(scrollValue); }); }); 

 body { height: 2000px; text-align: center; } p { position: fixed; font-size: 70px; top: 0; } 

 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <p>Scroll to view <span id="num"></span></p> 

看看這個例子