自定义滚动条

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
    },
}