原始答案

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

我认为您正在寻找wheel event。例如，当您旋转鼠标滚轮或类似设备进行滚动时，会触发此事件。这是一个使用方法的示例：

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>

Check out the example

滚动增加/减少变量

4 个答案:

原始答案

编辑