Horizontal Scroller with centered scrollbar - css

Question

How would you go about creating something like this:
The idea is you've got a horizontal scrollable section, and wanting to show the scrollbar underneath. But, you only want the scrollbar to be the width of the main container, centered to page.
Linked below a jsfiddle of how I've approached it, but no luck with trying to keep the scrollbar only centered. Tried using a max-width, but doesn't seem to have any affect. Any ideas?
.scroll-wrapper {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 24px;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
width: 16px;
}
&::-webkit-scrollbar-track {
background: #eee;
// you'd think max-width or something here would be the solution
}
&::-webkit-scrollbar-thumb {
background-color: red;
border-radius: 20px;
border: 4px solid #eee;
}
}
.scroll-wrapper > *:first-child {
margin-left: 80px;
}
.scroll-item {
flex: 0 0 auto;
margin-right: 16px;
}
https://jsfiddle.net/tzdcay9r/1/

Answer 1

I solved it… can use margins on the scrollbar-track 🤦‍♂️
https://jsfiddle.net/8snuamhv/1/
&::-webkit-scrollbar-track {
background: #eee;
margin-left: 80px;
margin-right: 80px;
}
Or if you want something a bit more dynamic, for example to match a container size, you can use a calc() function to work out the margin values.
$containerSize: 1120px;
&::-webkit-scrollbar-track {
background: #eee;
border-radius: 20px;
margin-left: calc((100vw - $containerSize) / 2);
margin-right: calc((100vw - $containerSize) / 2);
#media (max-width: $containerSize) {
margin-left: 16px;
margin-right: 16px;
}
}