滚动条不显示在移动设备上

Question

我有一个样式为下拉菜单的列表。

我希望滚动条显示，以便用户知道它是可滚动的。滚动条仅在您滚动时显示。我希望它默认显示。

注意：这适用于台式机，但不适用于移动设备。

以下是截图：

滚动条默认不显示

滚动条仅在滚动时显示

这是我的代码：

.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

实际上，我认为您也会在 macOS 中的 google chrome 中注意到这个问题。这是一个设计问题，有时滚动条只是隐藏起来，除非您编写自己的滚动条代码（大量工作），否则您只需要处理它。