美文网首页
自定义滚动条

自定义滚动条

作者: LIsPeri | 来源:发表于2019-03-29 11:21 被阅读0次

    引用插件mousewheel.js和easyscroll.js
    /滚动条css/

    scroller {

    position: relative;
    width: 620px;
    float: left;
        padding:0 40px 40px 40px;
    

    }
    .container{
    height: auto;

    }
    .container .div_scroll {
    width: 100%;
    height:700px;
    overflow: auto;
    }

    .container .scroll_container {
    overflow: hidden;
    position: relative;
    }

    .container .scroll_absolute {
    position: absolute;
    }
    .container .scroll_vertical_bar {
    position: absolute;
    top: 0;
    right: 0px;
    width:8px;
    height: 100%;
    background:#fff;
    /opacity: 0.2;
    filter:alpha(opacity=20);
    /
    background: url(../image/scroll_bg.png) repeat-y center 0;
    margin: 0;
    padding: 0;
    }
    .container .scroll_track {
    position: relative;
    background-color: transparent;
    }

    .container .scroll_drag {
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
    background-color: #dbdcdf;
    border-radius: 5px;
    }
    .container .scroll_arrow {
    text-indent: -20000px;
    display: block;
    cursor: pointer;
    background-color: #369DB4;
    }
    .container .scroll_vertical_bar .scroll_arrow {
    height: 16px;
    }
    js部分:
    ('.div_scroll,.scroll_container').css('height',_h-310);(".div_scroll").scroll_absolute({arrows:false});

    $('.wrap .container .faq').css('height',_h-380);
    var s=$('.wrap .container .faq').height;
     $(".div_scrolls").scroll_absolute({arrows:false});
    

    相关文章

      网友评论

          本文标题:自定义滚动条

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