滚动条手柄的固定高度

Question

我试图让滚动条的手柄保持固定的高度，使其为30px×30px的正方形，但高度命令只能使其大于默认大小，而设置比这更小的高度则没有效果。

::-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的 "snippet view "区域有设置最大高度，所以可能会影响这里的结果，这就是为什么你看到高度被设置为 100px 所以它可以存在于该snippet区域内......因为滚动条只适用于本机。#list div块，它需要给它分配一个高度，你就会得到这样的结果。

在不同的工作空间中试试，比如你自己的编辑器，然后在无序列表中添加更多的元素，看看是否仍然有效。