# OrbitControl embeded conflict with scroll on page

**URL:** <https://discourse.processing.org/t/orbitcontrol-embeded-conflict-with-scroll-on-page/32547>\
**Category:** Coding Questions\
**Created:** [October 1, 2021, 9:42am UTC](https://discourse.processing.org/t/orbitcontrol-embeded-conflict-with-scroll-on-page/32547 "2021-10-01T09:42:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sophie1000](https://avatars.discourse-cdn.com/v4/letter/s/8e8cbc/32.png) [@Sophie1000](https://discourse.processing.org/u/Sophie1000)\
**Post date:** [October 1, 2021, 9:42am UTC](https://discourse.processing.org/t/orbitcontrol-embeded-conflict-with-scroll-on-page/32547/1 "2021-10-01T09:42:53Z")

</div>

Hello,

I’m working on that project : [https://sophie1000.com/F360D/F360D/index.html](https://sophie1000.com/F360D/F360D/index.html)  
Each 3D object is in a canvas with OrbitControl, then embedded in iframe.  
On the global page, there is a horizontal scroll that works only when the mouse isn’t over the canvas.  
That’s the problem: I would like the MouseWheel scroll to works whoever the mouse is located on the page.

I have tried to disable the mouseWheel ([https://p5js.org/reference/#/p5/mouseWheel](https://p5js.org/reference/#/p5/mouseWheel)) on my canvas but it still doesn’t work.

The only thing that works is to set :

```auto
iframe {
pointer-events : none;
}

```

But then we can’t manipulate the object anymore, so that’s not the solution I need.  
I’ve also tried that as well :

```auto
iframe {
overflow : hidden; 
}

```

and nop, it doesn’t work.

Any idea?

Thank you for reading!

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [October 8, 2021, 7:04pm UTC](https://discourse.processing.org/t/orbitcontrol-embeded-conflict-with-scroll-on-page/32547/2 "2021-10-08T19:04:50Z")

</div>

hi! welcome to the forum!

maybe `preventDefault()` would be the solution?

> <https://stackoverflow.com/questions/10313142/javascript-capture-mouse-wheel-event-and-do-not-scroll-the-page>

It is a nice design but I found that you are using many canvases in one page, and that makes it very slow (I couldn’t load it on my laptop). Perhaps you need to reduce the number of pages, or you need to disable the canvases when they are not shown - but I think this is not a trivial problem to solve 🤔

---

<div class="post-metadata">

**Author:** ![Sophie1000](https://avatars.discourse-cdn.com/v4/letter/s/8e8cbc/32.png) [@Sophie1000](https://discourse.processing.org/u/Sophie1000)\
**Post date:** [November 18, 2021, 5:40pm UTC](https://discourse.processing.org/t/orbitcontrol-embeded-conflict-with-scroll-on-page/32547/3 "2021-11-18T17:40:11Z")

</div>

Hi Micuat,

Sorry for the late answer, I had to work on something else!  
I tried to add :  
`this.canvas.addEventListener('wheel',function(event){ mouseController.wheel(event); event.preventDefault(); }, false);`

It works! I just need to figure out how it could work perfectly with Instance Mode,  
because as you said: There was too much canvas so I decided to change that. Thank you a lot for that feedback 🙂