# I want to control 'scroll' through 'p5' 'mouseWheel' function

**URL:** <https://discourse.processing.org/t/i-want-to-control-scroll-through-p5-mousewheel-function/45127>\
**Category:** Beginners\
**Created:** [October 3, 2024, 6:06am UTC](https://discourse.processing.org/t/i-want-to-control-scroll-through-p5-mousewheel-function/45127 "2024-10-03T06:06:09Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [October 3, 2024, 6:06am UTC](https://discourse.processing.org/t/i-want-to-control-scroll-through-p5-mousewheel-function/45127/1 "2024-10-03T06:06:09Z")

</div>

I want to control ‘scroll’ through ‘p5’ ‘mouseWheel’ function.

Hello. Nice to meet you.

 ![figs](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/0/10f9c805b7702294445dcdc026638fbe784d11d5.jpeg)  
Please refer to the picture.  
I want to control up and down through ‘function mouseWheel(event)’.

Can I control scroll through that function?

```auto
function mouseWheel(event) {
  if (event.delta > 0) {

  } else {

  }
}

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [October 3, 2024, 10:23am UTC](https://discourse.processing.org/t/i-want-to-control-scroll-through-p5-mousewheel-function/45127/2 "2024-10-03T10:23:02Z")

</div>

Your web browser should already scroll with the mouse wheel.

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [October 3, 2024, 2:13pm UTC](https://discourse.processing.org/t/i-want-to-control-scroll-through-p5-mousewheel-function/45127/3 "2024-10-03T14:13:36Z")

</div>

@quark

Thank you for your answer.

1. As you said, scrolling is already controlled via ‘mouse wheel’.
2. However, if you declare ‘function mouseWheel(event)’, it will not do its job.
3. In other words, if you declare ‘function mouseWheel(event)’, scroll control will not work.

Sorry, I figured out why.

```auto
function mouseWheel(event) {
  if (event.delta > 0) {
  } else {
  }
return false;
}

```

Because of ‘false’. Thank you.

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [October 3, 2024, 2:20pm UTC](https://discourse.processing.org/t/i-want-to-control-scroll-through-p5-mousewheel-function/45127/4 "2024-10-03T14:20:13Z")

</div>

@quark  
Thank you so much. I solved it.

I’m asking because I don’t know much.  
By any chance, is it possible to control the scroll position with Y px(pixel)?  
I know it’s controlled with ‘CSS’ etc.  
By any chance, is it possible to control the scroll position with ‘p5’?

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [October 3, 2024, 2:27pm UTC](https://discourse.processing.org/t/i-want-to-control-scroll-through-p5-mousewheel-function/45127/5 "2024-10-03T14:27:21Z")

</div>

> [@GWAK](#):
>
> By any chance, is it possible to control the scroll position with ‘p5’?

You would need to put the `return false;` back so the wheel event is not passed onto the web browser. You would then need to add your own code to scroll the ‘document’. This should be possible through the DOM (Document Object Module) interface but I have little experience to doing that so perhaps someone else can take this discussion further.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [October 3, 2024, 2:52pm UTC](https://discourse.processing.org/t/i-want-to-control-scroll-through-p5-mousewheel-function/45127/6 "2024-10-03T14:52:28Z")

</div>

Just curious, how did you get the scroll bars in your original post?

I’m not sure I understand the question being asked. In the following demo the y value controls the image position. If you want to change the image’s position in the window then change the y value.

```auto
let cat;
let y = -700; // This controls image position

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function preload(){
  cat = loadImage('cat.png');
}

function draw() {
  background(220);   
  image(cat,0,y);
}

function mouseWheel(event) {
  if (event.delta > 0) {
    console.log("mouseWheel up: +"+event.delta);
    y += 10;
  } else {
  console.log("mouseWheel down: "+event.delta);
    y -= 10;
  }
}

```

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [October 3, 2024, 7:09pm UTC](https://discourse.processing.org/t/i-want-to-control-scroll-through-p5-mousewheel-function/45127/7 "2024-10-03T19:09:16Z")

</div>

@quark  
Thank you.

@svan

Hello. Thank you for your answer.

1. Normally, scroll is controlled through ‘mouse wheel’.
2. If ‘return false;’ is used, scroll control is not possible through ‘wheel’.
3. I want to control ‘scroll position’ through ‘p5’. Scroll refers to the size of the entire ‘canvas’.

```auto
function setup() {
createCanvas(500, 5000);
}
function draw() {
background(220);
}

function mouseWheel(event) {
if (event.delta > 0) {
console.log("mouseWheel up: +"+event.delta);
// → Send to the top of the scroll
} else {
console.log("mouseWheel down: "+event.delta);
// → Send to the bottom of the scroll
}
}

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [October 3, 2024, 7:19pm UTC](https://discourse.processing.org/t/i-want-to-control-scroll-through-p5-mousewheel-function/45127/8 "2024-10-03T19:19:38Z")

</div>

1.) Your post title states that you want to control ‘scroll’ through mouseWheel.  
2.) Now you state that you want to disable the mouseWheel.  
3.) Scrolling won’t change the size of the canvas.  
4.) If you want to change the viewPort with code that’s a different question.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [October 3, 2024, 8:32pm UTC](https://discourse.processing.org/t/i-want-to-control-scroll-through-p5-mousewheel-function/45127/9 "2024-10-03T20:32:19Z")

</div>

The following may or may not be helpful depending on what you are trying to do:

```auto
// https://www.quirksmode.org/mobile/viewports.html

function setup() {
  createCanvas(400, 2400);
  console.log("window inner height = " + window.innerHeight);
  console.log("pageYOffset pre-scroll = " + window.pageYOffset);
  // REM out the next line to see what it does
  window.scrollTo(0, 2300);
  console.log("pageYOffset post-scroll= " + window.pageYOffset);
}

function draw() {
  background(220);
  circle(100, 2000, 100);
}

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [October 3, 2024, 8:36pm UTC](https://discourse.processing.org/t/i-want-to-control-scroll-through-p5-mousewheel-function/45127/10 "2024-10-03T20:36:39Z")

</div>

It is not practical to use the mouse wheel method to _ **send** _’ to the top or to the bottom.

If you return `false` then the event is _consumed_ and the browser never sees it so you can’t use the wheel to scroll to intermediate views. If you return `true` you have the same problem because the browser cannot scroll further than your method has already sent it. In both cases the only way to see intermediate views would be to drag the vertical scrollbar.

> [@svan](#):
>
> 3.) Scrolling won’t change the size of the canvas.  
> 4.) If you want to change the viewPort with code that’s a different question.

Very true 😁

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [October 3, 2024, 10:33pm UTC](https://discourse.processing.org/t/i-want-to-control-scroll-through-p5-mousewheel-function/45127/11 "2024-10-03T22:33:40Z")

</div>

@svan

This is exactly what I want.  
Thank you. This is exactly what I wanted.  
Thank you so much.

```auto
var P_N = 0;
function setup() {
createCanvas(400, 4000);
}

function draw() {
background(220);
}

function mousePressed() {
P_N++;
if(P_N==1){
window.scrollTo(0,0);
}
else if(P_N==2){
window.scrollTo(0,1000);
}
else if(P_N==3){
window.scrollTo(0,2000);
}
else if(P_N==4){
window.scrollTo(0,3000);
P_N = 0;
}

}

```