MouseWheel Doesn't Scroll Back and Forth

Question

I'm using this script for mousewheel. What I have tried only works one way. Instead of scroll up and down it just Scrolls forward. What I want it to do is change the cursor Forwards and Backwards. Here is what I have tried.

I've also tried the DeltaY method, But could not figure it out.

var clicked = 0;
window.addEventListener('wheel', function(event) {
  if (clicked == 0) {
    document.getElementsByTagName("body")[0].style.cursor = "url('https://tim-school.com/codepen/mouser/1.png'), auto";
    clicked = 1;
  } else if (clicked == 1) {
    document.getElementsByTagName("body")[0].style.cursor = "url('https://tim-school.com/codepen/mouser/2.png'), auto";
    clicked = 2;
  } else if (clicked == 2) {
    document.getElementsByTagName("body")[0].style.cursor = "url('https://tim-school.com/codepen/mouser/3.png'), auto";
    clicked = 3;
  } else if (clicked == 3) {
    document.getElementsByTagName("body")[0].style.cursor = "url('https://tim-school.com/codepen/mouser/4.png'), auto";
    clicked = 4;
  } else if (clicked == 4) {
    document.getElementsByTagName("body")[0].style.cursor = "url('https://tim-school.com/codepen/mouser/5.png'), auto";
    clicked = 5;
  } else if (clicked == 5) {
    document.getElementsByTagName("body")[0].style.cursor = "url('https://tim-school.com/codepen/mouser/6.png'), auto";
    clicked = 0;
  }
});

body {
  background-color: #ffffff;
  overflow: hidden;
}

html,
body {
  height: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div class="box"></div>

Ray Wallace · Accepted Answer · 2025-04-27 16:26:52Z

1

Using event.deltaY will indicate if you should increment or decrement clicked. If you limit clicked to 1 through 6 then you can use a it in a template string to create the url string.

In the example below I moved the setting of .style.cursor to a separate function so you can make a call to set the initial cursor without waiting for the wheel.

// EDIT changed to 1
var clicked = 1;

setCursor( )

window.addEventListener('wheel', function (event) {
  // EDIT Increment or decrement clicked based on wheel movement direction
  if( event.deltaY < 0 ) {
    if( --clicked < 1 )  clicked = 6
  }
  else {
    if( ++clicked > 6 )  clicked = 1
  }

  setCursor( )
});

function setCursor( ) {
  // EDIT Used clicked in string template to set/change filename
  document.getElementsByTagName("body")[0].style.cursor =
    `url('https://tim-school.com/codepen/mouser/${clicked}.png'), auto`;
}

body {
  background-color: #ffffff;
  overflow: hidden;
}

html,
body {
  height: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div class="box"></div>

answered Apr 27 at 16:26

Ray Wallace

2,4191 gold badge7 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Timbukto Apr 27 at 19:57

Ok i was just using cursor change as an example function ..What if it was to call functions.. like Slide1();, Slide2();, Slide3()..etc

Ray Wallace Apr 27 at 20:37

Well, take what you have learned about using the wheel event and write some code to call functions, or whatever else it is you want to do. If you have trouble getting any of those other ideas to work, then consider posting a question on stackoverflow.

Roko C. Buljan · Accepted Answer · 2025-05-25 10:14:53Z

You could get a Math.sign() of the Event.deltaY and modulo it against the total number of available image cursors:

const mod = (n, m) => (n % m + m) % m; /** Fix negative modulo stackoverflow.com/a/71167019 */
const totImages = 6; // 6 cursor images in total
let wheelIndex = 0;

const setCursor = (n) => document.documentElement.style.cursor = `url('https://tim-school.com/codepen/mouser/${n}.png'), auto`;

addEventListener("wheel", (evt) => {
  evt.preventDefault();
  wheelIndex += Math.sign(evt.deltaY);
  wheelIndex = mod(wheelIndex, totImages);
  setCursor(wheelIndex + 1); // +1 since images start at 1 instead of 0
  console.clear(); console.log(`Cursor index: ${wheelIndex} (Move pointer to update cursor in Chromium)`);
}, {passive: false});

// Init
setCursor(1);

It would not hurt to preload all your cursor images, otherwise the browser might initially show a default cursor while loading your images. Or even better, use a custom DIV (move it a XY pointer coordinates) and use a single Sprite image, and change its backgroundPosition.

Collectives™ on Stack Overflow

MouseWheel Doesn't Scroll Back and Forth

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related