携帯端末にスクロールバーが表示されない

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

実際に私はあなたもmacOSのgoogle chromeでこの問題に気づくと思います。スクロールバーが単に隠されていて、それに対処しなければならないよりも独自のスクロールバーコード（たくさんの作業）を書かなければならないのは、デザインのことです。

Answer 2

あなたは-webkit-scrollbar擬似要素使用してスクロールバーで周りの混乱に試すことができます：

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

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

Answer 3

[OK]を、ので - 最初に - 私はそれが親要素によって隠されていたと思いました。しかし、そうではありませんでした。モバイルデバイスではそうではありません（ただし、ハンバーガーサイドバーでコンテンツを横長にカットするが、スクロールして貴重なスペースを無駄にする必要はありません）。

この場合、あなたはあなたはスクロールバーのスタイルを制御するために、その後、次のコードを追加するとき

-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!"