移动设备上没有滚动条显示

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>

                                        

- Mei

---

我非常确定这就是所有智能手机滚动条的工作方式。由于智能手机空间有限，滚动条会保持隐藏状态，直到需要使用它们。 - yaakov

@SteveVentimiglia 哎呀，谢谢提醒。我已经更新了截图。 - Mei

@TricksfortheWeb 这就是我想的。但是我在这个网站上看到了下拉菜单：https://www.carid.com/ 在手机上，它显示滚动条。 - Mei

@Mei - 你解决了这个问题吗？如果没有，可以查看我的答案（https://dev59.com/P57ha4cB1Zd3GeqPqecR#42101413）。请注意，滚动条控制一直是IE和Firefox的持续问题，但CSS是大多数移动浏览器的不错修复方法。否则，你总是可以选择JS路线来获得100％的解决方案，但我不喜欢为这样的核心问题创建解决方案，因为应该由负责引起它们的公司强制执行和解决，而不是我们。 - Steven Ventimiglia

Answer 1

好的，首先我认为这是由父元素隐藏导致的。但实际情况并非如此，在移动设备上也不是这种情况（但是这是在一个长的汉堡菜单栏中完全隐藏它的好方法，在横向显示被裁剪的内容但仍需要滚动而不浪费宝贵空间时使用）。

在这种情况下，理论上您实际上是隐藏了滚动条：

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

- Steven Ventimiglia

Answer 2

您可以尝试使用-webkit-scrollbar伪元素来调整滚动条：

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

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

- yaakov

Answer 3

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

- thesecretmaster

---

请问您能否给我一个创建自己滚动条代码的想法？我已经搜索了这些天，但我找到的都是 ::-webkit-scrollbar CSS 伪元素，而且在移动设备上也无法使用。 - Mei

我不建议这样做。这就像重新发明轮子。 - Steven Ventimiglia

Answer 4

在我的情况下，我认为我在具有滚动条的元素上无法在移动设备上滚动，因为除非您触摸可滚动区域，否则滚动抓手不会显示。在桌面浏览器中，抓手总是出现。这必须是移动设备上的房地产问题。

这是一个Angular应用程序中的CSS，可以使我的工作在桌面浏览器和移动浏览器上都能正常工作：

.message-text {  
    max-width: 90%;
    max-height: 20vw;
    margin-bottom:0px;  
    margin-top:5px;  
    overflow: auto;
    scroll-behavior: auto;
    /* scrollbar-color takes 2 colors. 1st is scroll grabber, 2nd background */
    scrollbar-color: rgb(23, 38, 182) rgb(162, 170, 238) ;
    scrollbar-width: auto;
}   

HTML：

<div>
    <div class="col-md-12">  
    <p class="confirm-message">{{message.text}}</p>  
    </div>  
</div>

注意：内部 div 的大小与外部 div 相关，{{message.text}} 是从组件中获取的一些短文本或长文本。

- Ken