Change scrollbar style only when horizontal

0
votes

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.

2
htmlcsswebkitscrollbarhorizontal-scrolling
There are more selectors available. Take a look here: developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar - Bouramas

2 Answers

1
votes

Use the pseudo-class selectors:

:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

Working demo: Codepen.

More info here.

Note: this only works on webkit browsers.

0
votes

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