如何更改滚动条拇指的高度? [英] How to change the height of a scrollbar thumb?

问题描述

是否可以将滚动条的高度更改为固定高度并更改相应滚动内容的数量?这是我当前的CSS代码.

Is there any way to change the height of a scrollbar to a fixed height and change the amount of content scrolled accordingly? This is my current css code.

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

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #003B7C; 
    border-radius: 10px;
    background: white;
    border-left: 8px solid rgba(255,255,255,0);
    border-right: 8px solid rgba(255,255,255,0);
    background-clip: content-box;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to right,#003B7C, #00538B, #83BBE6); 
    border-radius: 8px;
}

推荐答案

https://jsfiddle.net/j6gmobuz/6/

.visible-scrollbar::-webkit-scrollbar-thumb {
    background-color: #acacac;
    border-radius: 50px;
    height: 120px;
}

通过使用"::-webkit-scrollbar-thumb"上的height属性，我能够部分控制滚动拇指的高度.看来是最低高度值，我无法在其下设置新值.

I was able to partly control the height of the scroll thumb by simply using height property on "::-webkit-scrollbar-thumb". It appears to be minimum height value which I wasn't able to set a new value below it.

也许这会有所帮助.

这篇关于如何更改滚动条拇指的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！