jquery 自定义滚动条

以你之姓@ 2021-09-15 07:20 493阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="keywords" content="我的梦想:暴富!">
    <meta name"description" content="工匠精神的证明，隐藏在每一个值得被放大欣赏的细节中。">
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    .box{
    width: 260px;
    height: 300px;
    border: 1px solid skyblue;
    overflow: hidden;
    position: relative;
    padding-right: 10px;
    margin: 100px auto;
     
     
    }
    .scrollBox{
    width: 13px;
    height: 100%;
    border-left: 1px solid gray;
    position: absolute;
    right: 0;
    top: 0px;
     
     
    }
    .scroll{
    width: 10px;
    background-color: pink;
    position: absolute;
    top: 0;
    left: 1.5px;
    cursor: pointer;
    border-radius: 5px;
    height: 20px;
    }
    .content{
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    color: #132658;
    }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js"></script>
    <script src="https://cdn.bootcss.com/jquery-mousewheel/3.1.0/jquery.mousewheel.min.js"></script>
    </head>
    <body>
    <div class="box" id="box">
    <div class="scrollBox" id="scrollBox">
    <div class="scroll ui-widge-content" id="scroll"></div>
    </div>
    <div class="content" id="content">孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    孩儿励志出湘关，学不成名终不还。
    埋骨何须桑梓地，人生无处不青山。
    </div>
    </div>
    <script type="text/javascript">
    var rate=$('#box').outerHeight()/$('#content').outerHeight();
    $('#scroll').css('height',$('#scrollBox').outerHeight()*rate+'px');
    console.log($('#scrollBox').offset());
    $('#scroll').draggable({
    axis:'y',//约束在水平方向移动 y 垂直方向移动
    containment:'parent',//在父元素中移动
    grid:[1,1],//每次移动的长度
    drag:function (event,ui) {
    // 拖拽事件的回调
    console.log(ui);
    console.log(ui.position.top);
    //输出的是p在父元素中的位置变化
    $('#content').css('top',-(ui.position.top/rate)+'px');
     
     
    }
    // console.log(ui.position.left,ui.position.top);
    });
    var nowScrollTop = 0;
     
     
    $('#box').mousewheel(function(event, delta, deltaX, deltaY) {
    if (window.console && console.log) {
    if (deltaY) {
    var direction = deltaY > 0 ? 1 : -1;
    }else{
    var direction = evt.deltaY > 0 ? -1 : 1;
    }
    nowScrollTop+=-10*direction;
    // console.log(direction);
    // console.log(nowScrollTop);
    if (nowScrollTop < 0) {
    nowScrollTop = 0;
     
     
    }else if (nowScrollTop > $('#scrollBox').outerHeight() - $('#scroll').outerHeight()) {
    console.log(nowScrollTop);
     
     
    nowScrollTop = $('#scrollBox').outerHeight() - $('#scroll').outerHeight();
    }
     
    $('#scroll').css('top',nowScrollTop + 'px');
    $('#content').css('top',-(nowScrollTop/rate)+'px');
             // console.log(deltaY);d
             
         }
     });
     
     
    </script>
    </body>
    </html>

# 效果图: #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDQzMzc3_size_16_color_FFFFFF_t_70][]                                                  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDQzMzc3_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDQzMzc3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200414090729523.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDQzMzc3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDQzMzc3_size_16_color_FFFFFF_t_70 1]: /images/20210726/4fad79388c6145cab2ae391d79ad597d.png