html - 如何使 webkit 滚动条可见

Question

在我的 HTML GUI 中有 3 个部分:---

• 水平顶部(div 的类是可滚动 --- & --- div 的 ID 是图片)
• 垂直向左(div 的类是 scrollableMenu --- & --- IDdiv 是菜单)

• 中心区域(div的类是scrollableCenter --- & --- div的ID是center)

  1. 当我按下按钮 1 时，我的 jQuery 代码(使用隐藏/显示方法)在 Div scrollableMenu 中显示 7 个输入类型的 class-1 图像。
  2. 当我按下按钮 2 时，我的 jQuery 代码(使用隐藏/显示方法)在 Div scrollableMenu 中显示 8 个 class-2 输入类型图像。
  3. 当我按下按钮 3 时，我的 jQuery 代码(使用隐藏/显示方法)在 Div scrollableMenu 中显示 3 个输入类型图像的 class-3。
  4. 当我按下按钮 4 时，我的 jQuery 代码(使用隐藏/显示方法)在 Div scrollableMenu 中显示 4 个输入类型图像的 class-1。

目前我只有webkit滚动条沿着DIV scrollableMenu垂直向下运行。
那是根据我的要求，即我只需要为 div scrollableMenu 垂直向下运行的 webkit 滚动条。

问题 我面临的是，万一 3 和 4 我的 webkit 滚动条变得不可见。

即使输入类型图像的数量较少，我的 webkit-scrollbar-track 是否有可能保持可见？
我必须添加哪个属性才能至少使我的 webkit-scrollbar-track 可见？

---

GUI View :

=========================================================

 Button-1   Button-2   Button-3    Button-4  Button-5

=========================================================
                 ||
                 ||
                 ||
      DIV        ||
 scrollableMenu  ||
                 ||
                 ||
                 ||
                 ||
                 ||
=========================================================

---

CSS:

div.scrollable {
    margin: 0;
    padding: 0;
    overflow: auto;
    padding-left: 4px;
    padding-top: 20px;
    box-sizing:border-box;
}

div.scrollableMenu {
    margin: 0;
    padding: 0;
    overflow: auto;
    padding-left: 4px;
    padding-top: 20px;
    box-sizing:border-box;
}

div.scrollableCenter {
    margin: 0;
    padding: 0;
    overflow: auto;
    padding-left: 4px;
    padding-top: 20px;
    box-sizing:border-box;
}

#images {
    background-color:#888686;
    white-space:nowrap;
}

#Menu {
    background-color:#292B3B;
    position:absolute;
    top:115px;
    bottom:20px;
    left:0;
    width:250px;
}
#center {
    background-color:#292B3B;
    position:absolute;
    top:115px;
    left:250px;
    right:0px;
    bottom:20px;
}


::-webkit-scrollbar-track {
      background-color: #DDDFED;
      border-radius: 20px;

}

::-webkit-scrollbar {
    background-color: #DDDFED;
    width: 10px;
    height: 10px;
} 

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
      background-color: #CCC9DA;
}

Answer 1

我猜你只想让垂直 (y) 滚动条可见。
不是水平 (x)。

您需要做的就是定义滚动条的位置(x 或 y):

div.scrollableMenu {
    margin: 0;
    padding: 0;
    overflow-y: scroll; /*(-y) here defines the direction of the scrollbar*/
    padding-left: 4px;
    padding-top: 20px;
    box-sizing:border-box;
}

如果出于某种原因底部滚动条仍然出现，请使用 overflow-x: hidden。

编辑:
快速说明:
(y) = 垂直
(x) = 水平

---

Read more about CSS overflow property