Html make div scrollable on mobile (airconsole)

Question

i am building an angular site, I need to make a div that cointains other divs scrolable (if it is bigger than the screen). I tried -webkit-overflow-scrolling: touch; but it didn't work. This is my code:

<div *ngFor="let playlist of genres" class="scrollable">
      <div [id]="playlist.category" (click)="genreSelected(+playlist.category, playlist.name)" class="questionElement, scrollable">{{ playlist.name }}</div>
</div>

.scrollable {
  -webkit-overflow-scrolling: touch;
}

The website is only used on smartphones with the airconsole API.

Answer 1

Try this

.scroll {
-webkit-overflow-scrolling: touch;
overflow: auto;
width: 100%;
border: 1px solid black;
height: 100px;
border-radius: 10px;
font-family: monospace;
padding: 1em;
}

<div class="scroll">
Some<br>
Test<br>
Content<br>
To<br>
Make<br>
New<br>
Lines<br>
Scroll<br>
Scroll<br>
Scroll
</div>

I think you are missing some values.
PS: Not tested

Answer 2

As for AirConsole, you may want to initialize it with

setup_document: false

As in:

new AirConsole({ setup_document: false })

Documentation:

Sets up the document so nothing is selectable, zoom is fixed to 1 and scrolling is disabled (iOS 8 clients drop out of fullscreen when scrolling)

https://developers.airconsole.com/#!/api