Priya Singh Priya Singh - 27 days ago 9
CSS Question

Include scroll in a leaderboard

I have a leaderboard here :

The thing is when I click the tabs at the top,the list of persons toggle accordingly.Now I have given only 8 employees here in the leaderboard.

I have 800 employees and I want to include everyone in the list(I will have 4 different list according to the 4 different tabs) with a scroll bar vertically.also the size of the leaderboard should remain the same,that is why I want a scroll .

can this be possible .Kindly help.

Fiddle link :

[1]: https://jsfiddle.net/sharma1331/xp5qra10/

Answer

You can use the below code it will work perfectly,

CSS:

.leaderboard {
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  width: 285px;
  height: 200px;
  background: -webkit-linear-gradient(top, #3a404d, #181c26);
  background: linear-gradient(to bottom, #3a404d, #181c26);
  border-radius: 10px;
  box-shadow: 0 7px 30px rgba(62, 9, 11, 0.3);
  overflow-x: hidden;
}

You will have to give a fixed height as i have given height:200px; and then hide the overflow on the y-axis like this overflow-x:hidden; so that the scroll bar will appear if the height is exceeded.