滚动条 - 拇指的高度

Question

我需要滚动条的帮助。我希望:: - webkit-scrollbar-thumb的高度为5厘米，但我无法修复它。 :: - webkit-scrollbar-thumb的高度等于parent的高度。这是我的代码。

<div class="left-side" id="style-scrollbar">
Nulla sit amet mauris odio. Aenean vitae arcu volutpat, consequat lacus sed, pulvinar augue. Nunc iaculis dapibus fringilla. Vestibulum et mauris quis lacus ultricies elementum ut at ante. Fusce placerat, massa nec tempus pulvinar, nulla tortor vestibulum elit, sit amet volutpat libero massa facilisis nibh. Aenean iaculis ultrices facilisis. Vivamus porta tortor sed mauris ultrices placerat. Suspendisse commodo nibh enim, eget pulvinar risus tristique et. Morbi tincidunt finibus luctus. Sed tincidunt, urna eget malesuada ultricies, dui massa bibendum tortor, a vehicula libero purus in est. Curabitur tincidunt, felis placerat pretium posuere, sapien odio pulvinar libero, nec posuere est nunc egestas diam. Pellentesque efficitur, orci vulputate consectetur imperdiet, justo tortor sollicitudin est, et fermentum leo eros sed diam. Vivamus elementum nisl elit, ac condimentum dolor hendrerit ac.


</div>
.left-side{
  width: 350px;
  margin-right: 22px;
    height:50%;
    overflow-y: scroll;
}
#style-scrollbar::-webkit-scrollbar {
    width: 9px;
}
#style-scrollbar::-webkit-scrollbar-thumb {
    background-color: #1e7af5;
    border-radius: 10px;height:5px
    outline: 1px solid #708090;

}

#style-scrollbar::-webkit-scrollbar-track {
    background: #b2b2b2;
    border: 5px solid transparent;
    background-clip: content-box;
}

Answer 1

我注意到了几件事。

1. height: 5px最后没有分号，接着是另一条线。这通常会导致浏览器解析CSS时出错。
2. 设置height: 50%仅在具有已定义高度的父元素时才有效。否则它将忽略该属性。 Note: Only calculated values can be inherited. Thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a value) will be accessible on the inherited property, not the percentage value.
3. 在此示例中为一个元素创建ID和类标记效率有点低。真的只是有点挑剔。

.left-side{
    width: 350px;
    margin-right: 22px;
    height:200px;
    overflow-y: scroll;
}
#style-scrollbar::-webkit-scrollbar {
    width: 9px;
}
#style-scrollbar::-webkit-scrollbar-thumb {
    background-color: #1e7af5;
    border-radius: 10px;
    height:5px;
    outline: 1px solid #708090;

}

#style-scrollbar::-webkit-scrollbar-track {
    background: #b2b2b2;
    border: 5px solid transparent;
    background-clip: content-box;
}

<div class="left-side" id="style-scrollbar">
Nulla sit amet mauris odio. Aenean vitae arcu volutpat, consequat lacus sed, pulvinar augue. Nunc iaculis dapibus fringilla. Vestibulum et mauris quis lacus ultricies elementum ut at ante. Fusce placerat, massa nec tempus pulvinar, nulla tortor vestibulum elit, sit amet volutpat libero massa facilisis nibh. Aenean iaculis ultrices facilisis. Vivamus porta tortor sed mauris ultrices placerat. Suspendisse commodo nibh enim, eget pulvinar risus tristique et. Morbi tincidunt finibus luctus. Sed tincidunt, urna eget malesuada ultricies, dui massa bibendum tortor, a vehicula libero purus in est. Curabitur tincidunt, felis placerat pretium posuere, sapien odio pulvinar libero, nec posuere est nunc egestas diam. Pellentesque efficitur, orci vulputate consectetur imperdiet, justo tortor sollicitudin est, et fermentum leo eros sed diam. Vivamus elementum nisl elit, ac condimentum dolor hendrerit ac.
</div>