0

So, the question is how we can set the custom scrollbar color for some div scroll? I try next, but it does not help, no result:

.message-list__container::-webkit-scrollbar {
    width: 12px;
}

.message-list__container::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

.message-list__container::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

This is work, but for browser scroll, not for div scroll:

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
Max Wolfen
  • 1,923
  • 6
  • 24
  • 42
  • [dev.mozilla has example at bottom of page](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar) – GolezTrol May 07 '18 at 15:11
  • @GolezTrol it does not work in Chrome – Max Wolfen May 07 '18 at 15:12
  • Their example does work for me in Chrome, so it should be possible. Can you make an example that includes your HTML, so we can reproduce the issue? You can make a [Stack snippet](https://meta.stackoverflow.com/questions/269753/feedback-requested-runnable-code-snippets-in-questions-and-answers) (runnable code) in the question, and optionally add a JSFiddle, so we can verify the issue in your actual code. – GolezTrol May 07 '18 at 15:14
  • That does work, the problem could be in the markup. – Rainbow May 07 '18 at 15:20
  • It works on chrome. https://jsfiddle.net/michaelyuen/s9k9amf5/ But I suggest other approach for browser compatibility https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox – Michael Eugene Yuen May 07 '18 at 15:33

0 Answers0