Полоса прокрутки не отображается на мобильном устройстве

Question

У меня есть список, который называется выпадающим меню.

Я хочу, чтобы полоса прокрутки отображалась так, чтобы пользователь знал, что она прокручивается. Полоса прокрутки отображается только при прокрутке. Я хочу, чтобы он показывался по умолчанию.

ПРИМЕЧАНИЕ. Это работает на рабочем столе, но не на мобильном устройстве.

Вот скриншоты:

Scroll bar doesnt show on default

Scroll bar shows only when scrolling

Вот мой код:

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

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

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

 
.vehicleyear li 
 
{ 
 
     list-style-type: none; 
 
\t padding: 19px 0; 
 
\t 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

На самом деле, я думаю, что вы заметили эту проблему в google chrome в macOS тоже. Это элемент дизайна, где иногда панель прокрутки просто скрыта, и если вы не написали свой собственный код прокрутки (много работы), чем вам просто нужно иметь дело с ним.

Answer 2

Вы можете попробовать возиться с скроллинга с помощью элемента -webkit-scrollbar псевдо:

-webkit-scrollbar, 
-webkit-scrollbar-track { 
    display: block !important; 
} 

https://css-tricks.com/examples/WebKitScrollbars/

Answer 3

Итак, - на первый - я думал, что это прячась от родительского элемента. Но это не так. Это не относится к мобильным устройствам (но это отличный способ скрыть его на длинной боковой панели гамбургера, которая показывает, что контент отключен в ландшафте, но ему еще нужно прокручивать, не теряя ценного пространства.)

В этом случае вы на самом деле скрывается скроллбар, в теории:

-webkit-appearance: none; 

Однако при добавлении следующего кода впоследствии управлять стилем вашего скроллинга, он будет немедленно вернуть его к партии - сделать это как половина моих друзей .. голодающий за внимание.

::-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; 
} 

Codepen.io Пример: "Scrollbar... where the f*** are you?!?! There ya are!"