# Scrolling on one canvas only (instance mode)

**URL:** <https://discourse.processing.org/t/scrolling-on-one-canvas-only-instance-mode/17802>\
**Category:** Beginners\
**Created:** [February 13, 2020, 8:59pm UTC](https://discourse.processing.org/t/scrolling-on-one-canvas-only-instance-mode/17802 "2020-02-13T20:59:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![calornorte](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/calornorte/32/6066_2.png) [@calornorte](https://discourse.processing.org/u/calornorte)\
**Post date:** [February 13, 2020, 8:59pm UTC](https://discourse.processing.org/t/scrolling-on-one-canvas-only-instance-mode/17802/1 "2020-02-13T20:59:06Z")

</div>

hello!  
I’m producing two canvases on Instance Mode, my plan is to be able to mouseScroll on just one canvas, but I can’t make it work.  
I believe… I’m making a name function that is called from mousewheel in the first canvas setup and I’m sure i’m doing something terrible wrong… I don’t really understand well Instance mode.  
thoughts?

[https://editor.p5js.org/caminofarol/sketches/6t5QmGWU](https://editor.p5js.org/caminofarol/sketches/6t5QmGWU)

```auto
var pgPos = 50;

var s1 = function( p ) {
  p.setup = function() {
    var canvas1 = p.createCanvas(400, 400);
    canvas1.mouseWheel(doScroll);
    canvas1.position(0,0);
  }

  p.draw = function() {
  p.background(128);
  p.translate(50, pgPos); 
  p.fill(255);
  p.rect(0,0, 300, 200); 
}
  
  
  var doScroll = function() {
  pgPos += event.delta;  
    
}
};

new p5(s1);

var s2 = function( p ) {
p.setup = function() {
    var canvas2 = p.createCanvas(400, 400);
    canvas2.position(400,0);
  }
   p.draw = function() {
    p.background(160);
    p.rect(0,0, 300, 200); 
  }
};

new p5(s2);

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 14, 2020, 2:28am UTC](https://discourse.processing.org/t/scrolling-on-one-canvas-only-instance-mode/17802/2 "2020-02-14T02:28:05Z")

</div>

> [@calornorte](#):
>
> `pgPos += event.delta;`

According to method p5.Element::**mouseWheel()**'s reference:

> **[reference | p5.js](https://p5js.org/reference/)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

The WheelEvent doesn’t have any property named _delta_:

> **[WheelEvent - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent)**
>
> The WheelEvent interface represents events that occur due to the user moving a mouse wheel or similar input device.

You should access property _deltaY_ instead:

> **[WheelEvent: deltaY property - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY)**
>
> The WheelEvent.deltaY read-only property is a
> double representing the vertical scroll amount in the
> WheelEvent.deltaMode unit.

And global property _event_ is more appropriate to use for the global callback **mouseWheel()**:

> **[reference | p5.js](https://p5js.org/reference/#/p5/mouseWheel)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

For the p5.Element version, makes more sense to access the WheelEvent object passed to the callback:

```auto
function doScroll(evt) {
  pgPos += evt.deltaY;
}

```

Also it’s advisable to declare variable _pgPos_ inside the sketch callback instead:

```auto
new p5(p => {
  let pgPos = 50;

  p.setup = () => {
    // ...
  }
});

```

---

<div class="post-metadata">

**Author:** ![calornorte](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/calornorte/32/6066_2.png) [@calornorte](https://discourse.processing.org/u/calornorte)\
**Post date:** [February 14, 2020, 3:47am UTC](https://discourse.processing.org/t/scrolling-on-one-canvas-only-instance-mode/17802/3 "2020-02-14T03:47:03Z")

</div>

Thanks a lot!  
this has been very helpful! I should have looked better into mouseWheel!  
also, there is a similar canvas specific example in its p5 reference!  
thanks again!