# 3d scene Scroll on mobile

**URL:** <https://forum.babylonjs.com/t/3d-scene-scroll-on-mobile/32231>\
**Category:** Questions\
**Created:** [July 16, 2022, 1:34am UTC](https://forum.babylonjs.com/t/3d-scene-scroll-on-mobile/32231 "2022-07-16T01:34:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![pigga](https://avatars.discourse-cdn.com/v4/letter/p/439d5e/32.png) [@pigga](https://forum.babylonjs.com/u/pigga)\
**Post date:** [July 16, 2022, 1:34am UTC](https://forum.babylonjs.com/t/3d-scene-scroll-on-mobile/32231/1 "2022-07-16T01:34:22Z")

</div>

We have a project on a mobile web page, which user will get stuck on the 3d scene (can’t scroll up or down anymore), when they interact with it, the only way they can scroll up and down is to move to the html part of the page which is not very straightforward.

Are there any good suggestions here about how we can improve user experience? Thanks!

Added a playground example here, so on mobile, I can think one solution is overscroll when reach the beta limit because mobile slide down to scroll, but looks like not working well

Playground example [Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#TSCK58#7)

https://playground.babylonjs.com/#TSCK58#7

---

<div class="post-metadata">

**Author:** ![Dok11](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dok11/32/25754_2.png) [@Dok11](https://forum.babylonjs.com/u/Dok11)\
**Post date:** [July 16, 2022, 6:48pm UTC](https://forum.babylonjs.com/t/3d-scene-scroll-on-mobile/32231/2 "2022-07-16T18:48:48Z")

</div>

Maybe `canvas { pointer-events: none }` could help you?  
\*If your scene has not any interactive

---

<div class="post-metadata">

**Author:** ![pigga](https://avatars.discourse-cdn.com/v4/letter/p/439d5e/32.png) [@pigga](https://forum.babylonjs.com/u/pigga)\
**Post date:** [July 16, 2022, 7:03pm UTC](https://forum.babylonjs.com/t/3d-scene-scroll-on-mobile/32231/3 "2022-07-16T19:03:37Z")

</div>

Thank you for the suggestion, but our scene did have lots of interaction

---

<div class="post-metadata">

**Author:** ![Dok11](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dok11/32/25754_2.png) [@Dok11](https://forum.babylonjs.com/u/Dok11)\
**Post date:** [July 16, 2022, 9:30pm UTC](https://forum.babylonjs.com/t/3d-scene-scroll-on-mobile/32231/4 "2022-07-16T21:30:11Z")

</div>

Try to check this solution [How to create a click-only canvas? (disable movement, keep "pull down to refresh")](https://forum.babylonjs.com/t/how-to-create-a-click-only-canvas-disable-movement-keep-pull-down-to-refresh/9086)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [July 18, 2022, 2:50pm UTC](https://forum.babylonjs.com/t/3d-scene-scroll-on-mobile/32231/5 "2022-07-18T14:50:02Z")

</div>

@PolygonalSun might have a trick

---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [July 19, 2022, 12:22am UTC](https://forum.babylonjs.com/t/3d-scene-scroll-on-mobile/32231/6 "2022-07-19T00:22:49Z")

</div>

If there’s a canvas in the middle of a site and it’s preventing a user from scrolling, it might be worth looking into making some kind of toggle or activation to enter/exit interactive mode. For example, you could have your canvas set up so that the user has to double click to enter or exit an interactive mode:

```auto
var inputActive = false;
// ...
scene.onPointerObservable.add((eventData) => {
    if (inputActive) {
        inputActive = false;
        // Disable input, maybe by using camera.detachControls()
     }
     else {
        // Re-enable input
        inputActive = true;
     }
}, BABYLON.PointerEventTypes.POINTERDOUBLETAP);

```

Because of the nature of how the Cameras/InputManager consume events, it may not be possible to scroll past without adding something to either disable the canvas’ event listeners or re-route the events to the window, under specific circumstances.