1

Im trying to apply a custom scrollbar to a div called table-container. I've tried the following CSS:

.table-container {
overflow: scroll;
}

.table-container::webkit-scrollbar {
width: 12px;
}

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

This does not work. If I take ::webkit-scrollbar out of the .table-container class it works but applies it to all elements with scroll enabled. I want the above code to only apply to the .table-container div.

Any ideas?

Dev1997
  • 657
  • 1
  • 5
  • 16
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Aug 05 '16 at 14:43
  • Priak, you try to achieve something like this ? http://davidrhysthomas.co.uk/so/tableDiv.html – technico Aug 05 '16 at 14:45
  • @technico yes i have used that and it works great but since iOS devices default scrollbar is not obvious to the eye I've had to resort to a custom one but just can't get it to work on the div :( – Dev1997 Aug 05 '16 at 14:49
  • This seems to be an harder problem ... here are some (uneasy) ways to do it : http://stackoverflow.com/questions/3845445/how-to-get-the-scroll-bar-with-css-overflow-on-ios – technico Aug 05 '16 at 14:53
  • @technico thanks for the link, i'll check it out and see if I can find any solution :) – Dev1997 Aug 05 '16 at 15:00

0 Answers0