A not-too-tricky UI challenge at work had me scouring the internet for CSS tips around scrollbars on Apple devices. I had a dropdown feature with
a scrollbar that rendered a list of items. The scrollbar was visible on a Windows system but not on a Mac or an iPhone. This was a UX problem because users thought the dropdown only contained no more than 4 items when viewed on a Mac or an iPhone. Turns out that iOS has a default behaviour where scrollbars are not visible until a user starts scrolling.
A helpful way of changing this default behaviour is by customizing your own scrollbar. In 2018, the W3C org released <a href="https://www.w3.org/TR/2018/WD-css-scrollbars-1-20180925">a way</a> to customise the apperance of scrollbars using CSS. It's a non-standard method of styling, so, it makes use of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions">::-webkit</a> vendor prefix to overwrite the default apperance/behaviour of scrollbars. It's also good to note that only webkit browsers support these prefixes. (The official docs page of Mozilla Developers puts out this warning at the top of each prefix.)
Writing a custom scrollbar for iOs devices only involves a few lines of code and needs no JavaScript. There are several pseudo-elements that can be used to customize a scrollbar on a webkit browser. To be able to use these pseudo-elements, they must be prefixed with "-webkit-". Some of these pseudo-elements we are going to make use of are:
<pre><code>
 ::-webkit-scrollbar {/* targets the entire scrollbar container */}
 ::-webkit-scrollbar-button {/* targets the buttons positioned at the top and bottom of the scrollbar */}
 ::-webkit-scrollbar-track {/* targets the space below the progress bar. Think of it as a layer on top of the base scrollbar */}
 ::-webkit-scrollbar-track-piece {/* not covered area by the scrollbar-thumb */}
 ::-webkit-scrollbar-thumb {/* targets the draggable area of the scrollbar */}
 ::-webkit-scrollbar-corner {/* targets the bottom part of the scrollbar, where both horizontal and vertical scrollbars meet */}
 ::-webkit-resizer {/* targets the draggable resizing handle that appears at the bottom corner of some elements */}

</code></pre>
The code below puts some of these elements to use in order to create a custom scrollbar:
<pre><code>
 .parent {
 height: 200px;
 width: 300px;
 border: 1px solid #ddd;
 width: 25vw;
 background: #eee;
 overflow-y: scroll
 }
 .parent::-webkit-scrollbar {
 background-color: #fff;
 width: 10px;
 }

 .parent::-webkit-scrollbar-track {
 background-color: #fff;
 }

 .parent::-webkit-scrollbar-thumb {
 background-color: #babac0;
 border: 4px solid #fff;
 border-radius: 16px;
 }

 .parent::-webkit-scrollbar-button {
 display:none
 }
 .child{
 min-height: 100vh
 }
</code></pre>
In the code above, the property, .parent::-webkit-scrollbar sets the total width of the entire (vertical) scrollbar while the height automatically adjusts to the height of its parent container.
.parent::-webkit-scrollbar-track sets our scrollbar background color to white.
.parent::-webkit-scrollbar-thumb sets the background color, border radius and border of the movable/scrolling indicator. The border radius is set to 5px for rounded edges instead of default flat edges.
.parent::-webkit-scrollbar-button is set to display: none because I don't want the top and bottom buttons visible.
The screenshot below is what the output looks like. Also, this is a blown up shot of the code pen result. You can find the Codepen <a href="https://codepen.io/uzoamaka126/pen/dyVxmVy">here</a>
<img src="/code_screenshot.png" alt="a screenshot of the output of the code above">
That's all, folks!
If you want to read more on custom scrollbars and their pseudo-elements used to style them, I have attached some links below.
<h3>Notes</h3>
Here are some resources I found helpful on Webkit scrollbars:
<ol>
<li><a href="https://www.webkit.org/blog/363/styling-scrollbars/">Dave Hyatt's styling scrollbars</a>,</li>
<li><a href="https://www.digitalocean.com/community/tutorials/css-scrollbars">Digital Ocean's CSS scrollbars</a>,</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar">Mozilla Docs</a></li>
<li><a href="https://css-tricks.com/custom-scrollbars-in-webkit/">CSS Tricks</a></li>
</ol>
Also, you can check <a href="https://caniuse.com/?search=scrollbar">caniuse</a> to look up browsers that currently support scrollbar styling.

Scrollbars and iOS