时间戳

首页 > 解决方案 > 滚动条手柄的固定高度

html - 滚动条手柄的固定高度

问题描述

我试图让滚动条的句柄保持固定高度，使其为 30 像素 x 30 像素的正方形，但高度命令只会使其大于默认大小，并且将高度设置为小于此值没有效果。

::-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>

标签： htmlcsswebkitheightscrollbar

解决方案

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

#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以便它可以存在于该片段区域内......因为滚动条只是原生的到#listdiv 块，它需要一个高度来分配给它，你会得到结果。

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

推荐阅读