如何制作webkit滚动条 - 可见

Question

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

• 水平顶部（div的等级为scrollable ---＆amp; --- div的ID为 Images）
• 垂直向左（div的等级为scrollableMenu ---＆amp; --- ID为 div是menu）

• 中心区域（div的等级为scrollableCenter ---＆amp; --- div的ID为中心）

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

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

问题我面临的是，案例3＆amp; 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 scrolllableMenu上的滚动条可见。请使用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