What is the best way to create an onwheel event that produces an up and down effect using JavaScript?

Question

What is the best way to create an onwheel event that produces an up and down effect using JavaScript?

Looking for a way to trigger a function or loop when scrolling up or down using the onwheel event. Check out the code snippet below:

let demo = document.querySelector('#demo');
let c = 0;
window.onwheel = function() {
  c ++;
  demo.innerHTML = c;
}

body{
height: 300vh;
}
h1{
position: fixed;
text-align: center;
width: 100vw;
}

<h1 id="demo" > Hello World </h1>

Currently, the number increments when scrolling up, but I need it to decrement when scrolling down. Looking for a clear JavaScript solution. Thank you.

javascript arrays loops

Answer 1

Answer №1

Implementing the wheel event listener enables you to determine the scroll direction using event.deltaY:

let demo = document.querySelector('#demo');
let c = 0;

window.addEventListener('wheel', function(event) {
  if (event.deltaY < 0) {
    console.log('scrolling up');
    if (c == 0) { // ensure non-negative values
      demo.innerHTML = 0;
    } else {
      c--;
      demo.innerHTML = c;
    }
  } else if (event.deltaY > 0) {
    console.log('scrolling down');
    c++;
    demo.innerHTML = c;
  }
});

body {
  height: 300vh;
}

h1 {
  position: fixed;
  text-align: center;
  width: 100vw;
}

<h1 id="demo"> Hello World </h1>

Answer 2

Implementing the wheel event listener enables you to determine the scroll direction using event.deltaY:

let demo = document.querySelector('#demo');
let c = 0;

window.addEventListener('wheel', function(event) {
  if (event.deltaY < 0) {
    console.log('scrolling up');
    if (c == 0) { // ensure non-negative values
      demo.innerHTML = 0;
    } else {
      c--;
      demo.innerHTML = c;
    }
  } else if (event.deltaY > 0) {
    console.log('scrolling down');
    c++;
    demo.innerHTML = c;
  }
});

body {
  height: 300vh;
}

h1 {
  position: fixed;
  text-align: center;
  width: 100vw;
}

<h1 id="demo"> Hello World </h1>

Answer 3

Answer №2

document.addEventListener('wheel', function(event) {
  if (event.deltaY > 0) {
    // scrolling down
  } else {
    // scrolling up
  }
});

Answer 4

document.addEventListener('wheel', function(event) {
  if (event.deltaY > 0) {
    // scrolling down
  } else {
    // scrolling up
  }
});

Answer 5

Answer №3

If you want to detect if a user has scrolled down on a webpage, you can store the window.pageYOffset value and compare it to the current scroll position.

let demo = document.querySelector('#demo');
let c = 0;
let last_scroll= window.pageYOffset;
window.onwheel = function() {
  if(window.pageYOffset >= last_scroll && last_scroll != 0){
    c ++;
    demo.innerHTML = c;
  }
  last_scroll = window.pageYOffset;
}

body{
height: 300vh;

}
h1{
position: fixed;
text-align: center;
width: 100vw;
}

<h1 id="demo" > Hello World </h1>

Answer 6

If you want to detect if a user has scrolled down on a webpage, you can store the window.pageYOffset value and compare it to the current scroll position.

let demo = document.querySelector('#demo');
let c = 0;
let last_scroll= window.pageYOffset;
window.onwheel = function() {
  if(window.pageYOffset >= last_scroll && last_scroll != 0){
    c ++;
    demo.innerHTML = c;
  }
  last_scroll = window.pageYOffset;
}

body{
height: 300vh;

}
h1{
position: fixed;
text-align: center;
width: 100vw;
}

<h1 id="demo" > Hello World </h1>

Answer 7

Answer №4

 let dynamicHeight = dynamic.offsetHeight; 
 dynamic.onscroll = function(){}

Answer 8

 let dynamicHeight = dynamic.offsetHeight; 
 dynamic.onscroll = function(){}

What is the best way to create an onwheel event that produces an up and down effect using JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the technique for causing this element to move in reverse?

Code Not Functioning on Website Despite Working in Console

Sentry: Easily upload source maps from a nested directory structure

React: Render function did not return any content. This typically indicates that a return statement is missing

Instead of using onload, activate function upon click instead

Transmit the identification to angularjs for the genuine content to be displayed

Encountering the error message "undefined is not a function" while attempting to retrieve JSON data

Is there a way to automatically update a webpage?

Conditionally displaying an input model in Vue.js using v-if

I am unable to showcase the image at this time

The raycaster is experiencing issues when used with multiple cameras in the Three.js library

How to include a javascript file in a vuejs2 project

Is it feasible to conceal certain parameters within a URL using Angular UI Router?

Nuxtjs is functioning properly on 127.0.0.1:5000, but unfortunately it is not working on localhost:5000

What are some React component libraries compatible with Next.js 13.1?

Issues with Bootstrap 4 (possibly JQuery) - mobile menu navigation items are unresponsive

Exporting a object in Angular2 Using TypeScript

Storing user credentials in Firestore after registration - best practices

Using Bootstrap to handle opening a link when a dropdown menu button is clicked

Synchronize your store by utilizing cookies in the nuxtServerInit function of NuxtJS