如何使Webkit滾動條—可見

Question

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

• 水平居上（ div類scrollable ---＆- div ID為Images ）
• 垂直向左（ div類為scrollableMenu ---＆--- div ID為menu ）

• 中心區域（ div類為scrollableCenter ---＆--- div ID為center）

  1. 當我按下button-1時，我的jQuery代碼（使用hide / show方法）在Div scrollableMenu中顯示了class-1的7個輸入類型圖像。
  2. 當我按下button-2時，我的jQuery代碼（使用hide / show方法）在Div scrollableMenu中顯示了class 2的8個輸入類型圖像。
  3. 當我按下按鈕3時，我的jQuery代碼（使用隱藏/顯示方法）在Div scrollableMenu中顯示3類的3個輸入類型圖像。
  4. 當我按下button-4時，我的jQuery代碼（使用hide / show方法）在Div scrollableMenu中顯示了class-1的4個輸入類型圖像。

目前，我只有webkit滾動條沿DIV scrollableMenu垂直向下運行。
多數民眾贊成在按照我的要求，即我只需要垂直向下運行的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; 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）=水平

---

閱讀有關CSS overflow屬性的更多信息