美文网首页
自定义滚动条

自定义滚动条

作者: jing_bao | 来源:发表于2020-08-12 16:02 被阅读0次

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

    相关文章

      网友评论

          本文标题:自定义滚动条

          本文链接:https://www.haomeiwen.com/subject/afxydktx.html