Increment to max number and then decrement to minimum

Question

I want to make a Javascript function that will eventually cause a div to animate by updating a calculation as the user scrolls.

My aim is to do this by incrementing a number, initially from 0 up to 20. Once 20 is the value this number needs to be recognised and then the value needs to decrement down from 20 to -20 (For example)

At the moment I have a function that will count up as I scroll down the page and then when I scroll up will count down again but I'm not sure how best to get the values to also update when the numbers reach 20 and -20 as the user scrolls.

let scrollCount = 0;

window.addEventListener("mousewheel", function(e){

  if(e.wheelDelta < 0 && scrollCount < 20){
    scrollCount++
  }
 else if(e.wheelDelta > 0 && scrollCount > -20){
    scrollCount--
  }


  let x = scrollCount * window.innerWidth
  let y = 30 * window.innerHeight

  moveEye(irisLeft, x, y)
  moveEye(irisRight, x, y)

  console.log(scrollCount)

});

Let me ask this - what should happen if the users scrolls up, reaches 20, then continue scrolling up, so that the number drops to 15. Then they stop. Then they start again scrolling up. should the number go up from 15 until it reaches 20 again? This kind of behavior could be quite misleading to the user, especially if the number is stuck around 18-19. Then scrolling up will enlarge the div, then immediately make it smaller. let me know. — Smytt, Jun 20 '19 at 08:05
@Smytt Thanks for your response. The number shouldn't drop-off ideally, unless the user has scrolled to that value. 20 and -20 would be the maximum extremes (you'll see this with the console log i've added). Unless i've missed something? — Hellodan, Jun 20 '19 at 08:10
Could you please add a [Minimal, Reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)? It's a bit unclear what you're exactly trying to accomplish. — Daan, Jun 20 '19 at 08:15
@Farreal - Dann posted an answer which was correct and then deleted it :) Anyway - your idea is achievable but it'll still be quite user-unfriendly, since if you keep scrolling in one direction, the number will reach 20 and will start bouncing from 20 to 19 to 20 again, so make sure you add an **epilepsy** warning to your website :) just kidding, but yeah- think about that. — Smytt, Jun 20 '19 at 08:18
Still not sure what exactly you want here. So the value should keep permanently alternating between 20 and -20, even if I keep on scrolling down, and never scroll up at all? And what is supposed to happen when I finally _do_ change the scroll direction? — 04FS, Jun 20 '19 at 08:18
@04FS This is almost what I am after. I think I may of confused things with my code example and my question. I don't want the number to bounce between 19 and 20. When it gets to 20 it needs to count back down from 20 until it reaches -20. Then, when it reaches -20 count back up to 20, and so on, as the user is scrolling either up or down the page. I am basically animating a pair of cartoon eyes that will look as they are reading something by moving from left to right as the user scrolls down the page (hope that makes things a bit clearer) — Hellodan, Jun 20 '19 at 08:31
So what is supposed to happen when I change scroll direction? Is the counter supposed to go in the opposite direction it was currently going, no matter which one that was? I think this should use some kind of “direction modifier”, that gets its value toggled between 1 and -1, so that you can always simply _add_ that modifier to your counter. That modifier would need to be toggled when either one of the boundaries (-20 or 20) is reached, or when the scroll direction changes. — 04FS, Jun 20 '19 at 08:43
@Smytt’s revised answer appears to try and implement something like that already, see if that does what you want it to. — 04FS, Jun 20 '19 at 08:55

Smytt · Answer 1 · 2019-06-20T08:54:14.650

0

As I said in my comment - this behavior is quire weird as once 20 is reached your div will start trembling/bouncing and will throw your user in a epileptic shock.

let scrollCount = 0;
let direction = 1;

window.addEventListener("mousewheel", function (e) {

  if (e.wheelDelta < 0) {
    scrollCount += direction
    if (scrollCount === 20 || scrollCount === -20) {
      direction *= -1
    }
  }
  else if (e.wheelDelta > 0) {
    scrollCount -= direction
    if (scrollCount === 20 || scrollCount === -20) {
      direction *= -1
    }
  }


  let x = scrollCount * window.innerWidth
  let y = 30 * window.innerHeight

  // moveEye(irisLeft, x, y)
  // moveEye(irisRight, x, y)

  console.log(scrollCount)

});

edited Jun 20 '19 at 08:54

answered Jun 20 '19 at 08:21

Smytt

364
1
11

This is almost what I am after. I think I may of confused things with my code example and my question. I don't want the number to bounce between `19` and `20`. When it gets to `20` it needs to count back down from 20 until it reaches -20. Then, when it reaches -20 count back up to 20, and so on, as the user is scrolling either up or down the page. I am basically animating a pair of cartoon eyes that will look as they are reading something by moving from left to right as the user scrolls down the page (hope that makes things a bit clearer) – Hellodan Jun 20 '19 at 08:27
so... if I scroll down and reach 20 and keepscrolling down I go 20,19,18,17.... what if I start scrolling up? the initial behavior if upscrolling is downcounting. So once I reach 20 I go down to -20 no matter if scroll up or down? and what if I reach -20? Will it matter which direction I scroll in? – Smytt Jun 20 '19 at 08:30
Yeah I guess you're right, if you're upscrolling the value is downcounting and the opposite is true for downscrolling so the value should reflect that. Yes the number would be counting initially from `0, 1, 2, 3, 4, 5 .... 20` (Stop). Then in reverse `20, 19, 18, 17, 16, 15 ... -15, -16, -17, -18, -19 -20` (Stop). if the user starts to scroll in either up or down direction it should just get the value from the last number it was at (which it currently does in the console log) – Hellodan Jun 20 '19 at 08:44
I think I did what you meant. check the code. I've commented out the moveEye functions because they are currently undefined. But check out the console.logs. The direction alternates between 1 and -1 and increments/decrements the scrollCount. edit - even simplified it more. – Smytt Jun 20 '19 at 08:56
Yep that's pretty much it - thank you! One issue, once I am at the bottom of the page and I try to keep scrolling the value seems to go beyond `20` and it stops working when I scroll back up – Hellodan Jun 20 '19 at 09:30
@Farreal it's not possible for me to help with this without context. It seems to me it's not possible to go beyond 20 because in the code provided I only listens to mousewheels regardless off where the slider on the page is... – Smytt Jun 20 '19 at 10:11
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/195267/discussion-between-smytt-and-farreal). – Smytt Jun 20 '19 at 11:42

score 0 · Answer 2 · answered Jun 20 '19 at 08:22

I think using PageOffset would be a better option.

var scrollTop = window.pageYOffset;

This will give you an absolute px value of scroll position. Though it is not in range [-20,20], you can scale it mathematically(min-max scaling).

Scaling Answered Here

Round off scaled values to integers and you're done.

Increment to max number and then decrement to minimum

2 Answers2