如何使 webkit 滚动条 - 可见

Question

在我的 HTML GUI 中，它们是 3 部分：---

• 水平顶部（div 的类是 scrollable --- & --- div 的 ID 是 Images)
• 垂直向左（div 的类为 scrollableMenu --- & --- 的 ID div 是 menu)

• 中心区域（div 的类是 scrollableCenter --- & --- div 的 ID 是中心）

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

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

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

即使输入类型图像的数量较少，我的垂直向下运行的 webkit-scrollbar-track 是否仍然可见？
我必须添加哪个属性才能至少使我的 webkit-scrollbar-track 可见？

---

GUI 视图：

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

 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

我假设您希望左侧 div scrollableMenu 上的滚动条可见。请使用overflow: scroll; 使滚动条可见。

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

修改：overflow: scroll; 为 overflow-y:scroll; overflow-x:hidden;。

Answer 2

我猜你只想让垂直 (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