Hide scrollbar on horizontal repeating groups (mobile)

Need help
1

Good morning all ! I have a little problem. :laughing:

On my mobile web app, I have a lot of horizontal repeating groups to display data.

The problem is that each of them has a small scrollbar, which in terms of design does not look very good.

I would like to know how to remove them? I saw quite a few answers on the forum with HTML elements and CSS queries, but none of these solutions worked for me …

As a reminder, I’m talking about repeating groups on mobile (in case there is a difference)

Thank you all and happy new year !! :grinning:

1 Like
2 
<style type="text/css">
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: transparent;
  border: 0px none;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: transparent;
}
::-webkit-scrollbar-thumb:active {
  background: transparent;
}
::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none;
  border-radius: 0px;
}
::-webkit-scrollbar-track:hover {
  background: transparent;
}
::-webkit-scrollbar-track:active {
  background: transparent;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Thin Scrollbar */
:root{
  scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) !important;
  scrollbar-width: thin !important;
}

</style>

Put an HTML element on your page, copy and paste this code into it…you will have no scrollbars on any elements, not even the page.

14 Likes
3

This topic was automatically closed after 70 days. New replies are no longer allowed.