Monaca Onsen UI Discord Chat Github Repo

How to create a horizontal scrolling list in OnsenUI-Reactjs?

  • Does someone know how to do this?

  • @beebase You “might” be able to do this with this plugin:

    You would be able to place the Onsen components in the renderItem portion.

    Otherwise an option would be to just do it with a standard unordered list and CSS.

    <ul class="images">
    ul.images {
      margin: 0;
      padding: 0;
      white-space: nowrap;
      width: 900px;
      overflow-x: auto;
      background-color: #ddd;
    ul.images li {
      display: inline;
      width: 150px;
      height: 150px;

  • Thanks, unordered list works well except not with the Splitter (sidebar navigation) as the outer component of the app.
    Is there a way to disable the Splitter on certain pages?
    Or should I set the Navigator (stacked navigation) as outer component and then add the splitter on pages where I need them?


                Menu content
              <Navigator initialRoute={{component: Skills}}

  • Ah, found it. isSwipeable={false} makes the scrollbar work perfectly.

      return (

  • @beebase Glad you got it figured out! This is one I was watching because I have a project coming up soon where I will need to do a horizontal scroller as well. Thanks for the upvote and the feedback!