html部分滚动区域
<div class="rule_content" @scroll.passive="getScroll($event)">
//滚动内容区域
<!-- 自定义滚动条 -->
<div class="line_box">
<div class="current_process" :style="{top:current_top+'px'}"></div>
</div>
</div>
css部分
.rule_content{
position: absolute;
top: 326px;
left: calc(50% - 300px);
width: 600px;
height: 624px;
box-sizing: border-box;
overflow-y: scroll;
}
//隐藏默认滚动条
.rule_content::-webkit-scrollbar{
width: 0px;
height: 0px;
background-color: transparent;
}
//自定义滚动条
.line_box{
position: fixed;
top: 342px;
right: 89px;
width:10px;
height:600px;
background:#F9E9CE;
border-radius:5px;
overflow: hidden;
.current_process{
position: absolute;
right: 0px;
top: 0px;
width:10px;
height:201px;
background:#F8C97A;
border-radius:5px;
z-index 99
}
}
js部分
data() {
return {
current_top:0,//距离顶部距离
fontSizes:''
};
},
methods: {
getScroll(event){
// console.log(event.currentTarget.scrollHeight);
// console.log(event.currentTarget.scrollTop);
// console.log(event.currentTarget.clientHeight)
this.current_top = event.currentTarget.scrollTop / (event.currentTarget.scrollHeight - event.currentTarget.clientHeight) * 201
},
}
网友评论