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

好吧，所以 - 首先 - 我认为它被父元素隐藏了。但事实并非如此。在移动设备上情况并非如此（但这是一种很好的方法，可以在长长的汉堡包边栏上隐藏它，显示内容在景观中被截断但仍然需要滚动而不会浪费宝贵的空间。）

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

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

Answer 2

实际上我认为你也会在macOS中的谷歌浏览器中注意到这个问题。这是一个设计的东西，有时滚动条只是隐藏，除非你编写自己的滚动条代码（很多工作），而不是你必须处理它。

Answer 3

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

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

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

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}}是来自组件的一些短文本或长文本。

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

4 个答案: