Mati Tucci Mati Tucci - 5 months ago 13
HTML Question

Custom scrollbar only in one div

I want to have a custom scroll bar in Chrome.

So, I'm using this sass:

::-webkit-scrollbar {
width: 0.5em;
height: 0.5em;
}

::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,.1);
border-radius: 3px;

&:hover {
background: rgba(255,255,255,.2);
}
}


My problem is that I want this scrollbar style only in an specific div. But if I do:

#boardslist {

::-webkit-scrollbar {
width: 0.5em;
height: 0.5em;
}

::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,.1);
border-radius: 3px;

&:hover {
background: rgba(255,255,255,.2);
}
}

}


is not working. Any ideas?

Answer
#boardslist {

  &::-webkit-scrollbar {
   width: 0.5em;
   height: 0.5em;
  }

  &::-webkit-scrollbar-thumb {
   background-color: rgba(255,255,255,.1);
   border-radius: 3px;

   &:hover {
    background: rgba(255,255,255,.2);
   }
  }
}

Check this out http://codepen.io/tholman/pen/tldwm

Comments