Question

我正在尝试使scrolebar的手柄保持固定的高度，以使其为30px x 30px的正方形，但是height命令仅使其大于默认大小，并将高度设置为小于此默认值没有效果。

::-webkit-scrollbar {
    width: 30px;
}

::-webkit-scrollbar-track {
    background-color: green;
}

::-webkit-scrollbar-thumb {
    height: 30px;
    background-color: red;
}

<div id="container">
  <ul id="list1">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>
</div>

Answer 1

通过我从来不知道的可能性，这对我来说也是一个学习过程：}

#list1 {
  overflow-y: scroll;
  /*  Setting overflow-y does the trick here, since the scrollbar is native
  to the unordered list only -- as you will see below */
  height: 100px;
  /*  Based on the fiddle, this height determines the state of the scrollbar  */
}

/* Increasing specifity(using #list1), ensures the scrollbar sytling affects
the area within the #list1 only making it native to those elements only */
/* It would still work either way but its best to contain it for the specific element */
#list1::-webkit-scrollbar-track {
  background-color: steelblue;
  width: 30px;
}

#list1::-webkit-scrollbar {
  width: 30px;
  background-color: green;
}

#list1::-webkit-scrollbar-thumb {
  background-color: red;
  height: 30px;
}

<div id="container">
  <ul id="list1">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>
</div>

还要注意，Stackoverflow的“片段视图”区域已设置了最大高度，因此可能会影响此处的结果，这就是为什么您将高度设置为100px以便它可以存在于该片段区域的原因。 ..由于滚动条仅是#list div块的本机，因此需要为其分配高度，您才能获得结果。

在另一个工作区（如您自己的编辑器）中尝试，然后在无序列表中添加更多元素，看看它是否仍然有效

滚动条手柄的固定高度

1 个答案: