# \[Phaser 3\] Scrolling camera by drag

**URL:** <https://phaser.discourse.group/t/phaser-3-scrolling-camera-by-drag/2169>\
**Category:** Examples\
**Created:** [April 19, 2019, 6:47pm UTC](https://phaser.discourse.group/t/phaser-3-scrolling-camera-by-drag/2169 "2019-04-19T18:47:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jjcapellan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jjcapellan/32/542_2.png) [@jjcapellan](https://phaser.discourse.group/u/jjcapellan)\
**Post date:** [April 19, 2019, 6:47pm UTC](https://phaser.discourse.group/t/phaser-3-scrolling-camera-by-drag/2169/1 "2019-04-19T18:47:49Z")

</div>

Hi all,  
**ScrollingCamera** extends the class **Phaser.Cameras.Scene2D.Camera** of Phaser 3 framework, adding the capacity of vertical scrolling by dragging or using the mouse wheel. Can be usefull for menus with a lot of options.  
Live demo: [https://jjcapellan.github.io/Phaser3-ScrollingCamera/](https://jjcapellan.github.io/Phaser3-ScrollingCamera/)  
Repository: [https://github.com/jjcapellan/Phaser3-ScrollingCamera](https://github.com/jjcapellan/Phaser3-ScrollingCamera)

## How to use

This is the simplest case (uses the default parameters):

```javascript
// In create function ...
let myCamera = new ScrollingCamera(this);

```

The constructor of ScrollingCamera only needs as argument a scene object. All the other arguments are optionals.  
And this is the opposite case with all possible customizations:

```javascript
// In create function ...
let cameraOptions = {
      x: 50, // x position of the camera (default = 0)
      y: 50, // y position of the camera (default = 0)
      width: 300, // width of the camera (default = game.config.width)
      height: 500, // height of the camera (default = game.config.height)
      top: 600, // Top bound of scroll (default = 0)
      bottom: 3175, // Bottom bound of scroll (default = 5000)
      wheel: true, // Does this camera use mouse wheel? (default = false)
      drag: 0.90, // Reduces the scroll speed per game step in 10%. (default = 0.95)
      minSpeed: 9, // Bellow this speed value (pixels/second), the scroll is stopped. (default = 4)
      snap: true, // Does this camera use snap points? (default = false)
      snapConfig: { // Defines snap points
        topMargin: 50, // y position of first snap point (default = 0)
        padding: 50, // Space in pixels between snap points (default = 20)
        deadZone: 0 // % of space between points not influenced by snap effect (0 - 1) (default = 0)
      }
    };
let myCamera = new ScrollingCamera(this, cameraOptions);

```

I hope you like it.  
Regards.

---

<div class="post-metadata">

**Author:** ![prob](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/prob/32/628_2.png) [@prob](https://phaser.discourse.group/u/prob)\
**Post date:** [May 8, 2019, 1:29pm UTC](https://phaser.discourse.group/t/phaser-3-scrolling-camera-by-drag/2169/2 "2019-05-08T13:29:05Z")

</div>

This is a very nice camera scrolling example, thank you.

---

<div class="post-metadata">

**Author:** ![JorgeTestingGIT](https://avatars.discourse-cdn.com/v4/letter/j/b5a626/32.png) [@JorgeTestingGIT](https://phaser.discourse.group/u/JorgeTestingGIT)\
**Post date:** [June 11, 2019, 4:33pm UTC](https://phaser.discourse.group/t/phaser-3-scrolling-camera-by-drag/2169/3 "2019-06-11T16:33:12Z")

</div>

Do you have any version of this, where scroll is possible both vertical and horizontal?

---

<div class="post-metadata">

**Author:** ![jjcapellan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jjcapellan/32/542_2.png) [@jjcapellan](https://phaser.discourse.group/u/jjcapellan)\
**Post date:** [June 11, 2019, 6:48pm UTC](https://phaser.discourse.group/t/phaser-3-scrolling-camera-by-drag/2169/4 "2019-06-11T18:48:32Z")

</div>

Sorry, this is the only version I made. When I did this class, I was thinking of a very specific need.  
Regards.

---

<div class="post-metadata">

**Author:** ![jjcapellan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jjcapellan/32/542_2.png) [@jjcapellan](https://phaser.discourse.group/u/jjcapellan)\
**Post date:** [December 13, 2019, 7:06pm UTC](https://phaser.discourse.group/t/phaser-3-scrolling-camera-by-drag/2169/5 "2019-12-13T19:06:37Z")

</div>

Hi all,  
**Last update** :  
Fixed an issue that caused unexpected behavior in the scroll.  
Now the scrolling is more responsive and natural to the pointer movement.  
Thanks @jorbascrumps for the info.

Regards.