Overflow: Scroll on DOM Element

Phaser 3
1

I am adding a div using this.add.dom().createFromCache() that needs scrolling. How would I accomplish that? Do I have to set the scene size accordingly and move the camera to do this? It seems like overkill.

1 Like
2

Hi, @1schnitzel. Welcome to Phaser Forum.

Give us more information about what you want to accomplish and what you’ve already done to add DOM elements to your scene.

Could you put some code to guides us to help you?

3

Hi @Thyebe, thanks for the welcome. My problem is that I wanted to fix something that is already working. In my index.html I had a modal div on top of my game div where I showed some info. When the player clicked the close button I’d hide it with ‘display:none’. The div was much taller than the game but scrolling wasn’t an issue. Then I learned about add.dom() and I removed the modal div from my index.html, put the code in a modal.html and added it with ‘this.add.dom().createFromCache(“modal.html”)’. It’s displayed but I can’t scroll the content. I think it’s because the parent div that Phaser creates automatically has a overflow:hidden style applied. Since I’m having a ton of other issues and no time, I just went back to putting my modal in the index.html code. It works and it wasn’t smart to break it chasing some “elegant solution”. I was just wondering if there’s an easy solution to insert a scrollable div using the add.dom method.

5

Try:

<style>
/* Hide scrollbar for Chrome, Safari and Opera */
#main::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#main {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#main{
    height: {game config height};
}
</style>

<div id="main"></div>

To the topmost div in modal.html.

In the maingame.js, set origin to (0,0) like this:

this.add.dom().createFromCache(“modal.html”).setOrigin(0,0);
1 Like