-1

I am using Bootstrap thumbnail and I was wondering how to remove or hide scrollbar in div? I was looking for similar/same questions. I tried overflow: auto; and overflow:hidden. Bar is still showing on scroll. I was also wondering is there a way to add some style to the bar (something simple like background color change)?

enter image description here

Alva
  • 31
  • 2
  • 7

1 Answers1

1

You can't hide the scrollbar but still have the element scrollable. You need to have something. From a UX point of view it should be obvious that it's there and scrollable.

However, you can change the scrollbar appearance using CSS but it's experimental and only supported in webkit browsers like Chrome.

Article about it here on CSS-Tricks. Taken from the article...

::-webkit-scrollbar              {}
::-webkit-scrollbar-button       {}
::-webkit-scrollbar-track        {}
::-webkit-scrollbar-track-piece  {}
::-webkit-scrollbar-thumb        {}
::-webkit-scrollbar-corner       {}
::-webkit-resizer                {}

Or you could use a jQuery plugin instead. This seems to be a popular one. That makes the scrollbar style-able with better CSS support but obviously requires jQuery and a plugin for it.