Increase/decrease Variable On Scroll

Is there a way to increase a variable as the user scrolls up, and decrease when the user scrolls down with JavaScript? There is no maximum or minimum value for the variable, and it

Solution 1:

Original Answer

You can use window.scrollY. It's the distance in pixels from the top of the screen, so if you do -window.scrollY to get it to increase as they scroll up and decrease (become more negative) as they scroll down, like you asked for.

If you want to adjust sensitivity, you could divide it by something arbitrary (in this example, 5):

functiongetAdjustedScroll() {
    constDIVIDE_AMOUNT = 5;
    return -window.scrollY / DIVIDE_AMOUNT;
}

Edit

You can also use the wheel event to detect wheel movements on a non-scrolling page.

Using a similar example to the original:

let scrollAmount = 0;

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

Solution 2:

I think you are looking for the wheel event. This event is fired when you rotate the mousewheel or similar devices as when you do to scroll for example. Here is an example of how to use it:

var testDiv = document.getElementById("test-div");

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

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

Notes:

• This event is fired even if no actual scrolling happens. If there is no scroll space, the event still fires.
• If you wan to add sensitivity then just multiply ev.deltaY with a number that represent the sensitivity: amount += 0.5 * ev.delta; for example.

var testDiv = document.getElementById("test-div");

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

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

• You can prevent the actual scrolling by using ev.preventDefault(). The amount variable will still change but the scrolling of the page won't occur.

var testDiv = document.getElementById("test-div");

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

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

Solution 3:

yes there is. by use of getBoundingClientRect(); method which has 4 options:- top,left,bottom and right.further reading: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Solution 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;
}

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

Check out the example