滚动时增加/减少变量

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> 

看看这个例子