Search code examples
htmlcsswebkitscrollbarhorizontal-scrolling

Change scrollbar style only when horizontal

I have a horizontal scroll section on my website but i want to change the scroll style, iv'e managed to change the scroll bar style using '''::-webkit-scrollbar''' tag but it also affects the vertical scroll. I only want to change the scroll bar when its to slide content horizontally.

Any responses are greatly appreciated.

Solution

  • You can use ::webkit-scrollbar with particular class. For example: Let the container be '.scroll-content'

    .scroll-content::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);box-shadow: inset 0 0 6px rgba(0,0,0,0.1);background-color: #ccc;}
.scroll-content::-webkit-scrollbar{width: 5px;height: 5px;background-color: #ccc;}
.scroll-content::-webkit-scrollbar-thumb{background-color: #ff7043;}

    But this method is not applicable in Mozilla Firefox