Question

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

<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

我注意到了几件事。

height: 5px末尾没有分号，并且后接另一行。通常，这应该会导致浏览器解析CSS时出错。
设置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.
在此示例中，为一个元素创建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>

滚动条的高度

1 个答案: