更改滚动条高度 [英] Change scrollbar height
本文介绍了更改滚动条高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道是否可以像这样更改滚动条的高度:
I would like to know if it's possible to change scrollbar height like this image:
我尝试过
::-webkit-scrollbar {max-height: 50%; height: 50%;}
或
::-webkit-scrollbar-track {max-height: 50%; height: 50%;}
但是什么也没发生
谢谢
推荐答案
有可能. 您需要了解的第一件事是滚动条的结构.在这里,我引用了 css-tricks 中的图片.
It is possible. The first thing you need to know is the structure of a scroll bar. Here I reference a picture from css-tricks.
要实现您想要的目标,您需要:
to achieve what you want, you need:
- 更改5(滚动条拇指)开始滚动和停止滚动的位置
- 伪造一个滚动轨迹,而不是3.
.page {
position: relative;
width: 100px;
height: 200px;
}
.content {
width: 100%;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
padding: 0;
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid #ddd;
}
.page::after {
content:'';
position: absolute;
z-index: -1;
height: calc(100% - 20px);
top: 10px;
right: -1px;
width: 5px;
background: #666;
}
.wrapper::-webkit-scrollbar {
display: block;
width: 5px;
}
.wrapper::-webkit-scrollbar-track {
background: transparent;
}
.wrapper::-webkit-scrollbar-thumb {
background-color: red;
border-right: none;
border-left: none;
}
.wrapper::-webkit-scrollbar-track-piece:end {
background: transparent;
margin-bottom: 10px;
}
.wrapper::-webkit-scrollbar-track-piece:start {
background: transparent;
margin-top: 10px;
}
<div class="page">
<div class="wrapper">
<div class="content">
a<br/>
a<br/>
a<br/>
a<br/>a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
</div>
</div>
</div>
这篇关于更改滚动条高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文