Scrollbar doesn't show on mobile device

Question

I have a list that is styled as dropdown menu.

I want the scrollbar to show so that user will know it is scrollable. Scrollbar only shows when you scroll. I want it to show on default.

NOTE: This works on desktop but not on a mobile device.

Here are screenshots:

Scroll bar doesnt show on default

Scroll bar shows only when scrolling

Here is my code:

.part-finder-container ul.floatleft 
{
	 padding:0;
}

li.part-finder-vehicleyear
{
      border: 1px #f1f1f1 solid;
	  padding: 18px 15px 16px 15px;
	  margin-bottom: 10px;
	  cursor: pointer;
	  position: relative;
}

.part-finder-dropdownlist ul
{
      max-height: 300px;
	  overflow-y: scroll;
	  overflow-x: hidden;
	  width: 100%;
      padding: 0;
}

.vehicleyear li
{
      list-style-type: none;
	  padding: 19px 0;
	  border-top: 1px #f1f1f1 solid;
}

<div class="part-finder-container">
  <ul class="floatleft">
    <li class="part-finder-vehicleyear part-finder-vehicleenabled">
      <em>Select Year</em>
      <span class="arrow-down icon-arrow_drop_down"></span>
        <div class="part-finder-dropdownlist part-finder-dropdownlist-vehicleyear">
          <ul class="vehicleyear">
            <li>2014</li>
            <li>2013</li>
            <li>2012</li>
            <li>2011</li>
            <li>2010</li>
            <li>2009</li>
            <li>2008</li>
            <li>2007</li>
            <li>2006</li>
            <li>2005</li>
            <li>2004</li>
            <li>2003</li>
            <li>2002</li>
            <li>2001</li>
            <li>2000</li>
            <li>1999</li>
            <li>1998</li>
            <li>1997</li>
            <li>1996</li>
            <li>1995</li>
            <li>1994</li>
            <li>1993</li>
            <li>1992</li>
          </ul>
         </div>
       </li>
    </ul>
  </div>

                                        

Answer 1

Ok, so - at first - I thought it was being hidden by the parent element. But it wasn't. That's not the case on mobile devices (but a great method to hide it altogether on a long hamburger sidebar that shows content being cut off in landscape but still needs to scroll without wasting valuable space.)

In this case, you are actually hiding the scrollbar, in theory:

-webkit-appearance: none;

However, when you add the following code afterwards to control the style of your scrollbar, it will immediately bring it back to the party - making it like half my friends... starving for attention.

::-webkit-scrollbar {
   -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
   width: 10px;
}

::-webkit-scrollbar:horizontal {
   height: 10px;
}

::-webkit-scrollbar-thumb {
   background-color: #ccc;
   border-radius: 10px;
   border: 2px solid #eee;
}

::-webkit-scrollbar-track { 
   background-color: #eee; 
}