Change the look of your Softr app/website vertical scrollbar

Custom Coding
,
1

Hi All,

Do you want to get rid of that ugly scroll bar we all have in our browsers?

Demo here: https://test-play.softr.app/

Code here :point_down: - To be inserted in the header code, at APP LEVEL to spread it to all your app pages

<style>
::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
  border-radius: 10px;
}

::-moz-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
  border-radius: 10px;
}

::-ms-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #000;
  border-radius: 10px;
  border: 2px solid #f5f5f5;
}

::-moz-scrollbar-thumb {
  background-color: #000;
  border-radius: 10px;
  border: 2px solid #f5f5f5;
}

::-ms-scrollbar-thumb {
  background-color: #000;
  border-radius: 10px;
  border: 2px solid #f5f5f5;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

::-moz-scrollbar-thumb:hover {
  background-color: #555;
}

::-ms-scrollbar-thumb:hover {
  background-color: #555;
}
</style>
2 Likes
2

Note: to change the horizontal scrollbar of the table block it’s here: Give a better design to the horizontal scroll bar of the table block

Careful! this code can enter in conflict with the website vertical scrollbar code (the scroll bar of the table block will be doubled). I will update it in order to make the two codes work together without conflict

1 Like
3